设置鼠标右键自定义事件

作为一个前端工程师，有时候可能会遇到这种需求，点击鼠标右键，显示自定义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上，感兴趣的小伙伴可以看看。走你