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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17859051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:30:03  来源:igfitidea点击:

Can I handle a right click event on an HTML <button /> element?

javascripthtml

提问by Ken Bellows

I've seen plenty of questions and answers on SO and elsewhere that talk about right click events and how to catch and handle them with JavaScript, generally using the .buttonattribute of the eventobject generated by the browser.

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

However, the one thing I haven't found, probably because it's a pretty weird request, is how to catch and handle right clicks on an HTML <button />element. Buttons are not handled the same way by the browser as other elements. Most importantly, it seems that a right click on a button doesn't do anything. No context menu and, from what I can tell, no event.

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

Am I wrong? I hope so, because it will make my life easier. If not, I can simulate a button with a div and some CSS, but I'd rather avoid it. Any thoughts?

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

(PS: This is for a silly side project, so don't worry about me trying to put a button-right-click-based interface in front of any customers or anything. I'm well aware of how horrible that interface would probably be.)

(PS:这是一个愚蠢的副项目,所以不要担心我试图在任何客户或任何东西面前放置一个基于按钮右键单击的界面。我很清楚那个界面可能会多么可怕是。)

回答by tymeJV

Sure, just add a onmousedownlistener, check which mouse was pressed:

当然,只需添加一个onmousedown侦听器,检查按下了哪个鼠标:

JS:

JS:

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

HTML:

HTML:

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

Demo: http://jsfiddle.net/Jmmqz/

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

回答by SangeethK

http://jsfiddle.net/jqYN5/is this what you are looking for? Adding context-menu:

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

回答by Rusty Nail

Or, with perhaps a bit more beginner level understanding:

或者,也许有一点初学者级别的理解:

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

回答by Manish Patwari

You can make use of "context Menu" also :

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

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