想要web頁面充分展示自身特色，修改瀏覽器默認的右鍵事件必不可少。
右鍵單擊網頁，總是彈出另存爲、審查元素、查看網頁源代碼等等之類的菜單。就我看來這是挺影響體驗的。像右鍵這麼重要的位置，必須充分利用。調整頁面鏈接之類等等的需求都是可以的。
如何實現這個需求？利用瀏覽器contextmenu事件。
支持contextmenu事件的瀏覽器有IE、Firefox、Safari、Chrome和Opera11+。
下面是一個簡單的demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>contextmenu Event Example</title>
</head>
<body>
<div id="myDiv">Right click or ctrl+click me to get a custom context menu.
Click anywhere else to get the default context menu.</div>
<ul id="myMenu" style="position:absolute;visibility:hidden;background-color:silver">
<li><a href="https://www.baidu.com/">百度</a></li>
<li><a href="http://blog.csdn.net/qq_22509715">我的博客</a></li>
<li><a href="https://github.com/">github</a></li>
</ul>
</body>
</html>
var EventUtil = {
addHandler : function(element , type , handler){
if(element.addEventListener){
element.addEventListener(type , handler , false);
}else if(element.attachEvent){
element.attachEvent('on' + type , handler);
}else{
element['on' + type] = handler;
}
},
removeHandler : function(element , type , handler){
if(element.removeEventListener){
element.removeEventListener(type , handler ,false);
}else if(element.detatchEvent){
element.detatchEvent('on' + type , handler);
}else{
element['on' +type] = null;
}
},
getEvent:function(event){
return event ? event : window.event;
},
getTarget:function(event){
return event.target || event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
getRelatedTarget:function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
},
gutButton:function(event){
if(document.implementation.hasFeature("MouseEvents" , "2.0")){
return event.button;
}else{
switch(event.button){
case 0:
case 1:
case 2:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 7:
return 1;
}
}
},
getWheelDelta:function(event){
if(event.wheelDelta){
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
}else{
return -event.detail * 40;
}
},
getCharCode:function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
};
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";
});
})
以上js的事件處理程序用到了另外一篇文章的跨瀏覽器兼容性的事件處理程序
樣式代碼沒添加css樣式，只要稍微添加css就能很酷炫了哦!
