HTML5事件——contextmenu 隐藏鼠标右键菜单

在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件，通过取消其默认动作可以提供自定义菜单。
首先先写一个自己的菜单：

<style>
        ul, li {
            margin: 0;
            padding: 0;
        }

        #myMenu{
            list-style: none;
            width: 150px;
            border: 1px solid #ccc;
            border-bottom: none;
            position: absolute;
            display: none;
        }

        #myMenu li{
            border-bottom: 1px solid #ccc;
            padding: 5px 10px;
            cursor: pointer;
        }

        #myMenu li:hover{
            background-color: #ccc;
        }
    </style>

<ul id="myMenu">
    <li>右键想干什么？</li>
    <li>想看源代码？</li>
    <li>还是想审查元素？</li>
</ul>

显示时就是这个样子：

然后为document添加contextmenu事件，再取消掉其默认事件，让自定义菜单显示出来：

var myMenu = document.getElementById("myMenu");
document.addEventListener("contextmenu", function(event){
    event.preventDefault();
    myMenu.style.display = "block";
    //获取鼠标视口位置
    myMenu.style.top = event.clientY + "px";
    myMenu.style.left = event.clientX + "px";
});

当然，用户在别的地方单击记得隐藏菜单：

document.addEventListener("click", function(event){
    myMenu.style.display = "none";
});

通过给自定义菜单设置更好看的css将有更好的效果！

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/u011366705/article/details/46843937
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-28 03:39:31
阅读 ( 899 )
分类：前端

HTML5事件——contextmenu 隐藏鼠标右键菜单

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看