1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 取消鼠标右键默认事件contextmenu

取消鼠标右键默认事件contextmenu

时间:2024-06-28 22:41:51

相关推荐

取消鼠标右键默认事件contextmenu

想要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="/">百度</a></li><li><a href="/qq_22509715">我的博客</a></li><li><a href="/">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就能很酷炫了哦!

源代码

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。