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将有更好的效果！