caoporm97国产在线视频|欧美性XXXXX精品|一本一道久久a久久精品综合开|精品久久久久久久久久久AⅤ|

十年專注于品牌網(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 6488

關(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頁面為例。
? ? ? ?


? ? ? ? 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 事件的處理程序。這個事件處理程序首 先會取消默認行為，以保證不顯示瀏覽器默認的上下文菜單。然后，再根據(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://www.gimmickmag.com/如轉(zhuǎn)載請注明出處!

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

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

 
 
 
 
 
 
 
 
×