js自定義鼠標右鍵菜單


document.oncontextmenu = function(e) {
return false;
}
document.onmousedown
= function(e) {

switch(e.button) {
case 0:
console.log(
"鼠標左鍵")
break;
case 1:
console.log(
"鼠標中間");
break;
case 2:
console.log(
"鼠標右鍵");
break;
default:
break;
}
}

廢話不多說上代碼,核心知識是mousedown事件中的event對象中隱含了一個button屬性,這個屬性包含了3個值(IE瀏覽器有自己的一套實現機制,詳情見下圖,引用自W3School):

由於瀏覽器默認有鼠標右鍵菜單,比如說查看網頁源代碼,復制,刷新,審查元素等快捷操作。有時候我們並不想使用系統默認的功能,這時候我們可以阻止系統的contextmenu事件就OK了,然后在鼠標右鍵點擊的時候,自己模擬一個菜單(比如說用div包裹一個ui列表);

當我們點擊任何一個地方,右鍵菜單都應該消失才對,所以我們吧事件委托到document對象上。

document.onclick=function () {
//取消右鍵菜單,設置元素display為none
//。。。。。業務代碼
}

代碼只有世紀行,是不是很簡單呢?趕快動手做一個屬於你自己的右鍵菜單吧!


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com