最近中文字幕大全|熟女少妇精品一区二区|国产网红主播精品一区|日本一区二区精品理论电影|欧洲少妇无码精品视频在线|久久国产精品永久免费网站|人妻无码久久一区二区免费麻豆|国产日韩欧美一区二区在线高清

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

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

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

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

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

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


? ? ? ? ContextMenu Event Example
? ? ? ?


? ? ? ?

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

? ? ? ? ? ? ? ?


? ? ? ?這里的
元素包含一個自定義的上下文菜單。其中，
    元素作為自定義上下文菜單，并且在 初始時是隱藏的。實現(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 事件的處理程序。這個事件處理程序首 先會取消默認(rèn)行為，以保證不顯示瀏覽器默認(rèn)的上下文菜單。然后，再根據(jù) event 對象 clientX 和 clientY 屬性的值，來確定放置
      元素的位置。后一步就是通過將 visibility 屬性設(shè)置為 "visible"來顯示自定義上下文菜單。另外，還為 document 添加了一個 onclick 事件處理程序，以 便用戶能夠通過鼠標(biāo)單擊來隱藏菜單（單擊也是隱藏系統(tǒng)上下文菜單的默認(rèn)操作）。
      ? ? ? ? 雖然這個例子很簡單，但它卻展示了 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.iotmicrosoft.com/如轉(zhuǎn)載請注明出處!

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

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

 
 
 
 
 
 
 
 
×