JavaScript自定義鼠標(biāo)右鍵菜單欄
在項(xiàng)目中遇到了一個(gè)需要自定義鼠標(biāo)右鍵菜單欄的功能,今天在這里寫個(gè)小的方法,可以參考參考,同時(shí)歡迎大佬指出存在的問(wèn)題。
大概思路如下
一、 html結(jié)構(gòu)
<!-- 自定義鼠標(biāo)右鍵菜單 --> <div id="menu"> ? ? ? ? ? <ul> ? ? ? ? ? ? <li onclick="menuClick(1)">刪除</li> ? ? ? ? ? ? <li onclick="menuClick(2)">多選</li> ? ? ? ? ? ? <li onclick="menuClick(3)">平移</li> ? ? ? ? ? ? <li onclick="menuClick(4)">運(yùn)算符</li> ? ? ? ? ? ? <li onclick="menuClick(5)">中間事件</li> ? ? ? ?</ul> </div>
二、 css樣式
/* 自定義右鍵菜單 */ #menu{ ? ? display: none; ? ? position: absolute;? ? ? width: 150px; ? ? border:1px solid #ccc; ? ? background: #eee; } #menu ul { ? ? margin: 5px 0; } #menu li{ ? height: 30px; ? line-height: 30px; ? color: #21232E; ? font-size: 12px; ? text-align: center; ? cursor: default; ? list-style-type: none; ? border-bottom:1px dashed #cecece ;? } #menu li:hover { ? ? background-color: #cccccc; }
三、 js代碼
// 自定義鼠標(biāo)右鍵菜單欄 var menu = document.getElementById('menu'); document.body.oncontextmenu = function (e) { // 自定義body元素的鼠標(biāo)事件處理函數(shù) ? var e = e || window.event; ? e.preventDefault(); //阻止系統(tǒng)右鍵菜單? ? // 顯示自定義的菜單調(diào)整位置 ? let scrollTop = ? ? document.documentElement.scrollTop || document.body.scrollTop;// 獲取垂直滾動(dòng)條位置 ? let scrollLeft = ? ? document.documentElement.scrollLeft || document.body.scrollLeft;// 獲取水平滾動(dòng)條位置 ? menu.style.display = 'block'; ? menu.style.left = e.clientX + scrollLeft + 'px'; ? menu.style.top = e.clientY + scrollTop + 'px'; } // 鼠標(biāo)點(diǎn)擊其他位置時(shí)隱藏菜單 document.onclick = function () { ? menu.style.display = 'none'; } var menuClick = function (m) { ? if (m == "1") { ? ? alert("刪除成功") ? } else if (m == "2") { ? ? alert("暫未開通") ? } else if (m == "3") { ? ? alert("暫未開通") ? } else if (m == "4") { ? ? alert("暫未開通") ? } else if (m == "5") { ? ? createInterEvent(); ?// 這里調(diào)用了我自定義的方法 ? } }
大概效果如下
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript緩動(dòng)動(dòng)畫函數(shù)的封裝方法
這篇文章主要為大家詳細(xì)介紹了JavaScript緩動(dòng)動(dòng)畫函數(shù)的封裝方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11Input 特殊事件onpopertychange和oninput
onpopertychange和oninput的區(qū)別。2009-06-06JS隨機(jī)生成不重復(fù)數(shù)據(jù)的實(shí)例方法
這篇文章介紹了JS隨機(jī)生成不重復(fù)數(shù)據(jù)的實(shí)例方法,有需要的朋友可以參考一下2013-07-07使用documentElement正確取得當(dāng)前可見(jiàn)區(qū)域的大小
如何取得當(dāng)前瀏覽器里面可見(jiàn)區(qū)域的大???其他方法都不適用,只有documentElement才可以,需要的朋友可以參考下2014-07-07動(dòng)態(tài)改變div的z-index屬性的簡(jiǎn)單實(shí)例
這篇文章介紹了動(dòng)態(tài)改變div的z-index屬性的簡(jiǎn)單實(shí)例,有需要的朋友可以參考一下2013-08-08Javascript 獲取鼠標(biāo)當(dāng)前的位置實(shí)現(xiàn)方法
這篇文章主要介紹了Javascript 獲取鼠標(biāo)當(dāng)前的位置實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-10-10解決使用bootstrap的dropdown部件時(shí)報(bào)錯(cuò):error:Bootstrap dropdown require
這篇文章主要介紹了使用bootstrap的dropdown部件時(shí)報(bào)錯(cuò):error:Bootstrap dropdown require Popper.js ,小編把問(wèn)題描述和解決方案分享給大家,需要的朋友可以參考下2018-08-08javascript基礎(chǔ)知識(shí)之html5輪播圖實(shí)例講解(44)
這篇文章主要為大家詳細(xì)介紹了javascript基礎(chǔ)知識(shí)之html5輪播圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02