想要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.youkuaiyun.com/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就能很酷炫了哦!