Javascript實現(xiàn)鼠標右鍵特色菜單
在Web端,通常是不需要右鍵菜單,各個瀏覽器也有自己的右鍵菜單。但是對于一些特殊的網(wǎng)頁,是需要右鍵菜單來增加用戶體驗的,比如百度音樂,QQ郵箱,相信大家都在Web端使用過右鍵菜單了,現(xiàn)在來分享一下如何實現(xiàn),比較簡單。
運行代碼:
window.onload = function() { document.oncontextmenu = block; document.body.onmouseup = function(event) { if (!event) event = window.event; if (event.button == 2) { var x = event.pageX || event.clientX; var y = event.pageY || event.clientY; document.getElementById("contextMenu").style.left = x "px"; document.getElementById("contextMenu").style.top = y "px"; document.getElementById("contextMenu").style.display = "block"; } } //阻止事件冒泡 document.getElementById("contextMenu").onclick = function(event) { event.stopPropagation(); } //點擊其他地方隱藏 document.onclick = function() { document.getElementById("contextMenu").style.display = "none"; } for (var i = 0; i < getElementsByClassName("contextMenuItem").length; i ) { getElementsByClassName("contextMenuItem")[i].onclick = function(event) { event = event ? event : window.event var target = event.srcElement ? event.srcElement : event.targe; document.getElementById("contextMenu").style.display = "none"; //alert("您點擊了: " target.innerHTML); } } } function block(event) { if (window.event) { event = window.event; event.returnValue = false; } else event.preventDefault(); } //兼容IE不支持getElementsByClassName function getElementsByClassName(className, root, tagName) { if (root) { root = typeof root == "string" ? document.getElementById(root) : root; } else { root = document.body; } tagName = tagName || "*"; if (document.getElementsByClassName) { return root.getElementsByClassName(className); } else { var tag = root.getElementsByTagName(tagName); var tagAll = []; for (var i = 0; i < tag.length; i ) { for (var j = 0, n = tag[i].className.split(' '); j < n.length; j ) { if (n[j] == className) { tagAll.push(tag[i]); break; } } } return tagAll; } }
效果圖:
以上就是本文的全部內(nèi)容,希望大家可以喜歡。
相關(guān)文章
抽出www.templatemonster.com的鼠標懸停加載大圖模板的代碼
抽出www.templatemonster.com的鼠標懸停加載大圖模板的代碼...2007-07-07Javascript實現(xiàn)登錄記住用戶名和密碼功能
本文主要介紹了Javascript實現(xiàn)登錄記住用戶名和密碼功能的代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法
這篇文章主要介紹了fckeditor部署到weblogic出現(xiàn)xml無法讀取及樣式不能顯示問題的解決方法,分析了問題出現(xiàn)的原因及相關(guān)配置文件設(shè)置技巧,需要的朋友可以參考下2017-03-03JavaScript Window 打開新窗口(window.location.href、windo
本文主要介紹了JavaScript Window 打開新窗口的三種方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-05-05