十余年專注于網站建設_小程序開發_APP開發，低調、敢創新、有情懷！
全國服務熱線：
網站建設
APP開發
小程序開發
軟件開發
用戶案例
新聞動態
網頁知識
關于我們
關于contextmenu 事件， Windows 95在 PC中引入了上下文菜單的概念，即通過單擊鼠標右鍵可以調出上下文菜單。不久， 這個概念也被引入了 Web 領域。為了實現上下文菜單，開發人員面臨的主要問題是如何確定應該顯示上下文菜單（在 Windows 中，是右鍵單擊；在 Mac 中，是 Ctrl+單擊），以及如何屏蔽與該操作關聯的 默認上下文菜單。為解決這個問題，就出現了 contextmenu 這個事件，用以表示何時應該顯示上下文菜單，以便開發人員取消默認的上下文菜單而提供自定義的菜單。?
? ? ? ?由于 contextmenu 事件是冒泡的，因此可以為 document 指定一個事件處理程序，用以處理頁面中發生的所有此類事件。這個事件的目標是發生用戶操作的元素。在所有瀏覽器中都可以取消這個事件： 在兼容 DOM的瀏覽器中，使用 event.preventDefalut()；在 IE中，將 event.returnValue 的值設置為 false。南昌網站建設公司百恒網絡前端開發工程告訴大家原因，原因是contextmenu 事件屬于鼠標事件，所以其事件對象中包含與光標位置有關的所有屬性。通常使用 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
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ?這里的
元素包含一個自定義的上下文菜單。其中，
- 元素作為自定義上下文菜單，并且在 初始時是隱藏的。實現這個例子的 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";
? ? ? ? ? ? ? ?});
? ? ? ? });
? ? ? ? 在這個例子中，我們為
元素添加了 oncontextmenu 事件的處理程序。這個事件處理程序首 先會取消默認行為，以保證不顯示瀏覽器默認的上下文菜單。然后，再根據 event 對象 clientX 和 clientY 屬性的值，來確定放置
- 元素的位置。后一步就是通過將 visibility 屬性設置為 "visible"來顯示自定義上下文菜單。另外，還為 document 添加了一個 onclick 事件處理程序，以 便用戶能夠通過鼠標單擊來隱藏菜單（單擊也是隱藏系統上下文菜單的默認操作）。
? ? ? ? 雖然這個例子很簡單，但它卻展示了 Web 上所有自定義上下文菜單的基本結構。只需為這個例子 中的上下文菜單添加一些 CSS樣式，就可以得到非常棒的效果。?
? ? ? ?支持 contextmenu 事件的瀏覽器有 IE、Firefox、Safari、Chrome和 Opera 11+。
? ? ? ??
? 本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣大技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡http://www.527701.com/如轉載請注明出處!
Copyright @ 2006-2025 http://www.527701.com Inc. All Rights resreved.
贛公網安備36010902000406號
[贛ICP備17008688號-5] 網站地圖
百度統計
贛公網安備36010902000406號
[贛ICP備17008688號-5] 網站地圖
百度統計
售前咨詢