干熟妇在线视频午夜剧场一级A级|99成人香视频日本两性激情视频|久久 午夜福利无码精品人妻一区|热久久超碰精品精品少妇一区二区|五月天综合在线国产一区免费视频|亚洲成人中心热re久久99|亚洲国产怡红院丁香五月综合h|玖玖九久久久午夜射精视频

十二年專(zhuān)注于品牌網(wǎng)站建設(shè) 十余年專(zhuān)注于網(wǎng)站建設(shè)_小程序開(kāi)發(fā)_APP開(kāi)發(fā)，低調(diào)、敢創(chuàng)新、有情懷！
南昌百恒網(wǎng)絡(luò)微信公眾號(hào) 掃一掃關(guān)注
小程序
tel-icon全國(guó)服務(wù)熱線(xiàn)：400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
掃一掃打開(kāi)百恒網(wǎng)絡(luò)微信小程序

百恒網(wǎng)絡(luò)

南昌百恒網(wǎng)絡(luò)

contextmenu事件在H5中應(yīng)方法及實(shí)例

百恒網(wǎng)絡(luò) 2016-12-27 6518

關(guān)于contextmenu 事件， Windows 95在 PC中引入了上下文菜單的概念，即通過(guò)單擊鼠標(biāo)右鍵可以調(diào)出上下文菜單。不久， 這個(gè)概念也被引入了 Web 領(lǐng)域。為了實(shí)現(xiàn)上下文菜單，開(kāi)發(fā)人員面臨的主要問(wèn)題是如何確定應(yīng)該顯示上下文菜單（在 Windows 中，是右鍵單擊；在 Mac 中，是 Ctrl+單擊），以及如何屏蔽與該操作關(guān)聯(lián)的 默認(rèn)上下文菜單。為解決這個(gè)問(wèn)題，就出現(xiàn)了 contextmenu 這個(gè)事件，用以表示何時(shí)應(yīng)該顯示上下文菜單，以便開(kāi)發(fā)人員取消默認(rèn)的上下文菜單而提供自定義的菜單。?
? ? ? ?由于 contextmenu 事件是冒泡的，因此可以為 document 指定一個(gè)事件處理程序，用以處理頁(yè)面中發(fā)生的所有此類(lèi)事件。這個(gè)事件的目標(biāo)是發(fā)生用戶(hù)操作的元素。在所有瀏覽器中都可以取消這個(gè)事件： 在兼容 DOM的瀏覽器中，使用 event.preventDefalut()；在 IE中，將 event.returnValue 的值設(shè)置為 false。南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)前端開(kāi)發(fā)工程告訴大家原因，原因是contextmenu 事件屬于鼠標(biāo)事件，所以其事件對(duì)象中包含與光標(biāo)位置有關(guān)的所有屬性。通常使用 contextmenu 事件來(lái)顯示自定義的上下文菜單，而使用 onclick 事件處理程序來(lái)隱藏該菜單。以下面的 HTML頁(yè)面為例。
? ? ? ?


? ? ? ? ContextMenu Event Example
? ? ? ?


? ? ? ?

Right click or Ctrl+click me to get a custom context menu. Click anywhere else to get the default context menu.

? ? ? ? ? ? ? ?


? ? ? ?這里的
元素包含一個(gè)自定義的上下文菜單。其中，
    元素作為自定義上下文菜單，并且在 初始時(shí)是隱藏的。實(shí)現(xiàn)這個(gè)例子的 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";
    ? ? ? ? ? ? ? ?});
    ? ? ? ? });
    ? ? ? ? 在這個(gè)例子中，我們?yōu)?div>元素添加了 oncontextmenu 事件的處理程序。這個(gè)事件處理程序首 先會(huì)取消默認(rèn)行為，以保證不顯示瀏覽器默認(rèn)的上下文菜單。然后，再根據(jù) event 對(duì)象 clientX 和 clientY 屬性的值，來(lái)確定放置
      元素的位置。后一步就是通過(guò)將 visibility 屬性設(shè)置為 "visible"來(lái)顯示自定義上下文菜單。另外，還為 document 添加了一個(gè) onclick 事件處理程序，以 便用戶(hù)能夠通過(guò)鼠標(biāo)單擊來(lái)隱藏菜單（單擊也是隱藏系統(tǒng)上下文菜單的默認(rèn)操作）。
      ? ? ? ? 雖然這個(gè)例子很簡(jiǎn)單，但它卻展示了 Web 上所有自定義上下文菜單的基本結(jié)構(gòu)。只需為這個(gè)例子 中的上下文菜單添加一些 CSS樣式，就可以得到非常棒的效果。?
      ? ? ? ?支持 contextmenu 事件的瀏覽器有 IE、Firefox、Safari、Chrome和 Opera 11+。
      ? ? ? ??
      ? 本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://www.myforexfactory.net/如轉(zhuǎn)載請(qǐng)注明出處!

400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
掃一掃打開(kāi)百恒網(wǎng)絡(luò)小程序

歡迎您的光顧，我們將竭誠(chéng)為您服務(wù)×

 
 
 
 
 
 
 
 
×