Question

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

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

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

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

Answer 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/

Answer 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!')
}

Answer 3

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

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

Answer 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>

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

4 个答案: