十余年專注于網(wǎng)站建設(shè)_小程序開發(fā)_APP開發(fā)，低調(diào)、敢創(chuàng)新、有情懷！
全國服務(wù)熱線：
網(wǎng)站建設(shè)
APP開發(fā)
小程序開發(fā)
軟件開發(fā)
用戶案例
新聞動態(tài)
網(wǎng)頁知識
關(guān)于我們
方法及實例http://m.gimmickmag.com/article/1849.html&summary=contextmenu事件在H5中應(yīng)方法及實例&site=baidu&pics=http://m.gimmickmag.com/uploads/images//default/default.png "分享到QQ好友")
方法及實例&pic=http://m.gimmickmag.com/uploads/images//default/default.png&srcUrl=http://m.gimmickmag.com/article/1849.html "分享到人人網(wǎng)")
方法及實例&href=http://m.gimmickmag.com/article/1849.html?utm_source=js-share&utm_medium=douban&image=http://m.gimmickmag.com/uploads/images//default/default.png&updated=&bm=&url=http://m.gimmickmag.com/article/1849.html?utm_source=js-share&utm_medium=douban&title=contextmenu事件在H5中應(yīng)方法及實例&image=http://m.gimmickmag.com/uploads/images//default/default.png&comment=contextmenu事件在H5中應(yīng)方法及實例 "分享到豆瓣網(wǎng)")
方法及實例&summary=contextmenu事件在H5中應(yīng)方法及實例http://m.gimmickmag.com/article/1849.html&site=UiiiUiii&pics=http://m.gimmickmag.com/uploads/images//default/default.png "分享到QQ空間")
方法及實例@南昌百恒網(wǎng)絡(luò) 原文學(xué)習(xí)戳→&content=utf-8&pic=http://m.gimmickmag.com/uploads/images//default/default.png "分享到新浪微博")
關(guān)于contextmenu 事件， Windows 95在 PC中引入了上下文菜單的概念，即通過單擊鼠標右鍵可以調(diào)出上下文菜單。不久， 這個概念也被引入了 Web 領(lǐng)域。為了實現(xiàn)上下文菜單，開發(fā)人員面臨的主要問題是如何確定應(yīng)該顯示上下文菜單（在 Windows 中，是右鍵單擊；在 Mac 中，是 Ctrl+單擊），以及如何屏蔽與該操作關(guān)聯(lián)的 默認上下文菜單。為解決這個問題，就出現(xiàn)了 contextmenu 這個事件，用以表示何時應(yīng)該顯示上下文菜單，以便開發(fā)人員取消默認的上下文菜單而提供自定義的菜單。?
? ? ? ?由于 contextmenu 事件是冒泡的，因此可以為 document 指定一個事件處理程序，用以處理頁面中發(fā)生的所有此類事件。這個事件的目標是發(fā)生用戶操作的元素。在所有瀏覽器中都可以取消這個事件： 在兼容 DOM的瀏覽器中，使用 event.preventDefalut()；在 IE中，將 event.returnValue 的值設(shè)置為 false。南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)前端開發(fā)工程告訴大家原因，原因是contextmenu 事件屬于鼠標事件，所以其事件對象中包含與光標位置有關(guān)的所有屬性。通常使用 contextmenu 事件來顯示自定義的上下文菜單，而使用 onclick 事件處理程序來隱藏該菜單。以下面的 HTML頁面為例。
? ? ? ?
? ? ? ?
? ? ? ?
? ? ? ?
Right click or Ctrl+click me to get a custom context menu. Click anywhere else to get the default context menu.
? ? ? ? ? ? ? ?
- Baiheng' site
- Le98
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ?這里的
元素包含一個自定義的上下文菜單。其中，
- 元素作為自定義上下文菜單，并且在 初始時是隱藏的。實現(xiàn)這個例子的 JavaScript代碼如下所示。
? ? ? ? EventUtil.addHandler(window, "load", function(event){
? ? ? ? var div = document.getElementById("myDiv");
? ? ? ? ? ? ? ? EventUtil.addHandler(div, "contextmenu", function(event){
? ? ? ? ? ? ? ? event = EventUtil.getEvent(event);
? ? ? ? ? ? ? ? EventUtil.preventDefault(event);
? ? ? ? ? ? ? ? var menu = document.getElementById("myMenu");
? ? ? ? ? ? ? ? menu.style.left = event.clientX + "px";
? ? ? ? ? ? ? ? menu.style.top = event.clientY + "px";
? ? ? ? ? ? ? ? menu.style.visibility = "visible";
? ? ? ? ? ? ? ? });
? ? ? ? EventUtil.addHandler(document, "click", function(event){
? ? ? ? ? ? ? ? document.getElementById("myMenu").style.visibility = "hidden";
? ? ? ? ? ? ? ?});
? ? ? ? });
? ? ? ? 在這個例子中，我們?yōu)?div>元素添加了 oncontextmenu 事件的處理程序。這個事件處理程序首 先會取消默認行為，以保證不顯示瀏覽器默認的上下文菜單。然后，再根據(jù) event 對象 clientX 和 clientY 屬性的值，來確定放置
- 元素的位置。后一步就是通過將 visibility 屬性設(shè)置為 "visible"來顯示自定義上下文菜單。另外，還為 document 添加了一個 onclick 事件處理程序，以 便用戶能夠通過鼠標單擊來隱藏菜單（單擊也是隱藏系統(tǒng)上下文菜單的默認操作）。
? ? ? ? 雖然這個例子很簡單，但它卻展示了 Web 上所有自定義上下文菜單的基本結(jié)構(gòu)。只需為這個例子 中的上下文菜單添加一些 CSS樣式，就可以得到非常棒的效果。?
? ? ? ?支持 contextmenu 事件的瀏覽器有 IE、Firefox、Safari、Chrome和 Opera 11+。
? ? ? ??
? 本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://m.gimmickmag.com/如轉(zhuǎn)載請注明出處!
贛公網(wǎng)安備36010902000406號
售前咨詢