HTML自定义右键菜单oncontextmenu

右键菜单原理：取消右键菜单oncontextmenu的默认事件，然后添加自定义样式。

一、阻止默认事件

ie：

window.event.returnValue = false;

w3c：

window.event.preventDafault();

二、阻止事件流

ie:

window.event.cancleBubble = true;

w3c:

window.event.stopPropagation();

三、代码

不用window获取窗口，因为该元素不支持ie8，采用document.body 能够兼容ie7+。

采用clientX而不是用pageX，理由同上。

rightclick.onmousedown:

鼠标按下，为取消右键菜单栏。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                height: 600px;
            }
            .rightclick{
                display: none;
                width: 100px;
                height: 160px;
                border-width: 1px 1px 0 1px;
                border-style: solid;
                border-color: black;
                background-color: rgba(242,242,242,0.6);
                border-radius: 4px;
                position: fixed;
                left: 0;
                top: 0;
            }
            .rightclick ul{
                list-style: none;
                cursor: pointer;

            }
            .rightclick ul li{
                text-align: center;
                font-family: "微软雅黑";
                height: 31px;
                line-height: 31px;
                border-bottom: 1px solid #666;
            }
            
        </style>
    </head>
    <body>
        <div class="rightclick" id="rightclick">
            <ul>
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
                <li>菜单4</li>
                <li>菜单5</li>
            </ul>
        </div>
        <script type="text/javascript">
            document.body.oncontextmenu = function(e){
                var ev = window.event || e;
                if(document.all){
                    ev.returnValue = false;    //ie阻止默认事件
                }else{
                    ev.preventDefault();       //w3c阻止默认事件
                }
                var clientx = ev.clientX;
                var clienty =  ev.clientY;
                var rightclick = document.getElementById("rightclick");
                rightclick.style.display = "block";
                rightclick.style.left = clientx+"px";
                rightclick.style.top = clienty+"px";
            }
            
            document.body.onmousedown = function(){
                document.getElementById("rightclick").style.display = "none";
            };
            
            document.getElementById("rightclick").onmousedown = function(e){
                var ev = window.event|| e;
                if(document.all){
                    ev.cancelBubble =true;     // ie阻止事件流
                }else{
                    ev.stopPropagation();      // w3c阻止事件流
                }                
            };
            
        </script>
    
    </body>
</html>

四、兼容性

chrome firefox ie7+
√ √ √
posted @ 2017-09-18 16:08  cquptzy  阅读(1873)  评论(0)  编辑  收藏  举报