javascript - 我可以处理 HTML 上的右键单击事件吗元素？

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

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

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

Answer 4

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

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