logo标签列表

如何在JavaScript中捕获右键单击事件？

javascripthtmleventsevent-handlingdom-events
306
我想要阻止标准的上下文菜单，并手动处理右键点击事件。这该如何实现？
10
不，这是一个不同的问题。另一个问题想要“在不使用JavaScript的情况下阻止右键单击”，而这个问题只是想通过功能扩展它（很多网站成功地做到了这一点，而不会让用户感到恼人，例如Google文档）。 - bobobobo
我建议使用<a href="http://jquery.com/">JQuery</a>，<a href="http://beckelman.net/post/2008/11/04/Right-or-Left-Click-Context-Menu-Using-jQuery-Demo.aspx">这里有一个例子</a>。 - bobobobo
2
@Bobobobo：没错，我旨在扩展用户界面，而不是限制它。 - Giffyguy
1
ctrl+click或者cmd+click也是有效的情况。虽然它紧密地与右键单击耦合在一起，但这似乎不是完全重复，因为它处理上下文菜单而不是右键单击。右键单击包含在上下文菜单中，而不是反过来。 - Vlad Nicula
2个回答
456
使用oncontextmenu事件。
这是一个例子：
<div oncontextmenu="javascript:alert('success!');return false;">
    Lorem Ipsum
</div>

使用事件监听器：
el.addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    alert('success!');
    return false;
}, false);

不要忘记返回 false，否则标准上下文菜单仍然会弹出。

如果要使用自己编写的函数而不是 javascript:alert("Success!")，请记得在函数和 oncontextmenu 属性中都返回 false。

1
好代码 +1，我甚至找到了更简洁的方法。 只需在 chatMenu 中传递 e 并使用 e.preventDefault(e) 即可：D 这样，;return false; 就不需要为每个新元素（例如聊天记录等）都传递了。 - NiCk Newman
12
这段代码仅处理右键点击事件。如果您想为所有类型的鼠标点击事件添加一个事件处理程序，请与以下代码一起使用：var onMousedown = function (e) { if (e.which === 1) {/*左键*/ } else if (e.which === 3) {/*右键*/ } /*等等*/ }; clickArea.addEventListener("mousedown", onMousedown); contextmenu监听器将允许右键点击事件通过。请记住，在Mac上，Firefox浏览器中，ctrl+右键单击将被视为左键单击，但是在Chrome浏览器中，ctrl+右键单击将被视为右键单击。 - N D
1
一个缺失的返回值不也会被评估为 false 吗？ - InsOp
1
@InsOp 不，如果你想通过返回值来防止某些情况发生，必须明确地返回 false，跳过返回或返回 null 并不能防止任何事情的发生。 - jave.web
如果您更改return false命令，则会允许右键单击，因此该命令的名称。 - RixTheTyrunt
44

我认为你正在寻找类似于这样的东西:

   function rightclick() {
    var rightclick;
    var e = window.event;
    if (e.which) rightclick = (e.which == 3);
    else if (e.button) rightclick = (e.button == 2);
    alert(rightclick); // true or false, you can trap right click here by if comparison
}

参考http://www.quirksmode.org/js/events_properties.html，使用onmousedown事件来调用rightclick()函数（如果想要在整个页面上全局使用，可以这样做：<body onmousedown=rightclick(); >）。

4
我想你的意思是 if ((e.which && e.which == 3) || (e.button && e.button == 2))。 - Shea
12
或者 （e.which === 3 || e.button === 2） - ansiart
1
那是老派的做法，但几乎在任何地方都能运行。 - weaknespase
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接