我可以处理 HTML <button /> 元素上的右键单击事件吗？答案

【问题标题】：Can I handle a right click event on an HTML <button /> element?我可以处理 HTML <button /> 元素上的右键单击事件吗？
【发布时间】：2013-07-25 09:46:08
【问题描述】：

我在 SO 和其他地方看到了很多关于右键单击事件以及如何使用 JavaScript 捕获和处理它们的问题和答案，通常使用浏览器生成的 event 对象的 .button 属性。

但是，我没有找到的一件事，可能是因为这是一个非常奇怪的请求，是如何捕获和处理 HTML <button /> 元素上的右键单击。浏览器对按钮的处理方式与其他元素的处理方式不同。最重要的是，右键单击按钮似乎没有任何作用。没有上下文菜单，据我所知，没有事件。

我错了吗？我希望如此，因为它会让我的生活更轻松。如果没有，我可以模拟一个带有 div 和一些 CSS 的按钮，但我宁愿避免它。有什么想法吗？

（PS：这是一个愚蠢的项目，所以不要担心我试图在任何客户或任何东西面前放置一个基于按钮右键单击的界面。我很清楚这有多可怕界面可能是。）

【问题讨论】：

可能重复：stackoverflow.com/questions/2405771/…
"我可以*模拟一个带有 div 的按钮"
contextmenu 事件在 Chrome、Firefox、Opera（都在 Linux 上）和 Windows 7 上的 IE10 上为我触发：jsbin.com/oduhak/1 没有早期方便的 IE 来检查（虚拟机太多已经运行）。
@IanClark 谢谢，已修复。
@DevlshOne 不是重复的。正如我在帖子的第一句话中提到的，虽然我看过那个帖子和其他人喜欢它，但它似乎不适用于按钮。虽然我会按照 TJCrowder 的建议检查contextmenu 事件

标签： javascript html

【解决方案1】：

当然，只需添加一个onmousedown 侦听器，检查按下的是哪个鼠标：

JS：

document.getElementById("test").onmousedown = function(event) {
    if (event.which == 3) {
        alert("right clicked!");
    }
}

HTML：

<button id="test">Test</button>

演示：http://jsfiddle.net/Jmmqz/

【讨论】：

@IanClark 最新版本：22.0
我将改用onmouseup，但谢谢！我忘记了这些家伙。生成这些事件但不是onclick 事件真的很奇怪。
@KenB -- 很好，第一次写这样的东西，很高兴它成功了！

【解决方案2】：

http://jsfiddle.net/jqYN5/ 这就是你要找的吗？添加context-menu：

<input type="button" value="click me" id="btn">
<button id="btn2">right click</button>`

document.getElementById('btn').onclick = function() {
  alert('click!')
}

document.getElementById('btn2').oncontextmenu = function() {
  alert('right click!')
}

【讨论】：

这绝对是另一种解决方法。谢谢！

【解决方案3】：

您也可以使用“上下文菜单”：

document.getElementById('btn2').oncontextmenu = function() {
 alert('right click!')
}

【讨论】：

【解决方案4】：

或者，也许有更多的初级理解：

<script type="text/javascript">
function mouseclick(ele, e) {
if (e.type == 'click') {
    alert('Left Click Detected!');
}
    if (e.type == 'contextmenu') {
    alert('Right Click Detected!');
}
}
</script>

<a href="/" 
onclick="mouseclick(this, event)" 
oncontextmenu="mouseclick(this, event)" >link name</a>

【讨论】：