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

在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件，通过取消其默认动作能够提供自己定义菜单。

首先先写一个自己的菜单：

• 右键想干什么？
• 想看源码？
• 还是想审查元素？

显示时就是这个样子：

然后为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将有更好的效果。

查看原文