HTML自定义右键菜单oncontextmenu

时间：2017-09-18 17:32:47 阅读：241 评论：0 收藏：0 [点我收藏+]

标签：color 不用 otto w3c 而不是 func type html har

右键菜单原理：取消右键菜单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").onclick = function(e){
                var ev = window.event|| e;
                if(document.all){
                    ev.cancelBubble =true;     // ie阻止事件流
                }else{
                    ev.stopPropagation();      // w3c阻止事件流
                }                
            };
            
        </script>
    
    </body>
</html>

四、兼容性

chrome	firefox	ie7+
√	√	√

HTML自定义右键菜单oncontextmenu

标签：color 不用 otto w3c 而不是 func type html har

原文地址：http://www.cnblogs.com/cquptzy/p/7543622.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行