設置鼠標右鍵自定義事件

作為一個前端工程師，有時候可能會遇到這種需求，點擊鼠標右鍵，顯示自定義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上，感興趣的小伙伴可以看看。走你