设置鼠标右键自定义事件
作为一个前端工程师,有时候可能会遇到这种需求,点击鼠标右键,显示自定义ui。
这就用到了 contextmenu 事件
具体用法:
<div id="myBox">当你右键点击我时,会出现自定义事件,当你单击时,自定义取消。</div> <ul class="lists"> <li> <a href="www.baidu.com">百度一下,你就知道</a> </li> <li> <a href="www.google.com">Google</a> </li> <li> <a href="cn.bing.com">必应</a> </li> <li>努力学习,好好工作</li> <li>月薪50k</li> </ul>
<script> window.onload = function () { let menu = document.querySelector('.lists'), myBox = document.getElementById('myBox'); myBox.addEventListener('contextmenu', function(event){ // 阻止浏览器鼠标右击事件。 event.preventDefault(); menu.style.visibility = 'visible'; menu.style.left = event.clientX + 'px'; menu.style.right = event.clientY + 'px'; }, false); document.addEventListener('click', function (event) { menu.style.visibility = 'hidden'; }); } </script>
上面代码可以完成,可是没有跨浏览器,在IE中可能使用会出现问题。
这里写了一个跨浏览器的方案:
var EventUtil = { // 事件处理函数,使用DOM2,IE,两者都不满足可以使用DOM0事件 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; } }, // 在IE中,event是一个全局对象的属性 getEvent:function (event) { return event ? event : window.event; }, // 在DOM标准时间中,当前元素是target属性,IE中是scrElement属性 getTarget:function (event) { return event.target || event.srcElement; }, // 阻止默认事件 preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, // 移除事件处理程序 removeHandler:function(element, type, handler){ if(element.removeEventListener){ element.removeEventListener(type, handler, false); }else if(element.detachEvent){ element.detachEvent(type, handler); }else{ element["on" + type] = null; } }, // 阻止冒泡 stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } }, // 取得字符编码 getCharcode:function(event){ if(typeof event.charCode === 'number'){ return event.charCode; }else{ return event.keyCode; } } }
用上方的跨浏览器事件处理程序来完成的话,就简单多了。
<script src="EventUtil.js"></script>
<script> EventUtil.addHandler(window, 'load', function(){ let myBox = document.getElementById('myBox'), menu = document.querySelector('.lists'); EventUtil.addHandler(myBox, 'contextmenu', function (event) { event = EventUtil.getEvent(event); EventUtil.preventDefault(event); menu.style.visibility = 'visible'; menu.style.left = event.clientX + 'px'; menu.style.top = event.clientY + 'px'; }); EventUtil.addHandler(document, 'click', function(event){ menu.style.visibility = 'hidden'; }); }); </script>
具体代码我放在了我的github上,感兴趣的小伙伴可以看看。走你
如果你的才华还实现不了你的野心,那就静下心来,埋头苦干。有志者事竟成破釜成舟百二秦关终属楚,苦心人天不负卧薪尝胆三千越甲可吞吴!