欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript自定義鼠標(biāo)右鍵菜單欄

 更新時(shí)間:2022年07月28日 10:34:45   作者:Sleeping_Fairy  
這篇文章主要為大家詳細(xì)介紹了JavaScript自定義鼠標(biāo)右鍵菜單欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

在項(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)文章

最新評(píng)論