右键单击 Javascript 事件吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2405771/
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
Is right click a Javascript event?
提问by Brian
Is right click a Javascript event? If so, how do I use it?
右键单击 Javascript 事件吗？如果是这样，我该如何使用它？
回答by Andy E
As others have mentioned, the right mouse button can be detected through the usual mouse events (mousedown, mouseup, click). However, if you're looking for a firing event when the right-click menu is brought up, you're looking in the wrong place. The right-click/context menu is also accessible via the keyboard (shift+F10 or context menu key on Windows and some Linux). In this situation, the event that you're looking for is oncontextmenu:
正如其他人提到的，可以通过通常的鼠标事件（mousedown、mouseup、click）检测鼠标右键。但是，如果您要在弹出右键单击菜单时查找触发事件，那么您就找错了地方。右键单击/上下文菜单也可以通过键盘访问（Windows 和某些 Linux 上的 shift+F10 或上下文菜单键）。在这种情况下，您要查找的事件是oncontextmenu：
window.oncontextmenu = function ()
{
showCustomMenu();
return false; // cancel default menu
}
As for the mouse events themselves, browsers set a property to the event object that is accessible from the event handling function:
至于鼠标事件本身，浏览器将一个属性设置为可从事件处理函数访问的事件对象：
document.body.onclick = function (e) {
var isRightMB;
e = e || window.event;
if ("which" in e) // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
isRightMB = e.which == 3;
else if ("button" in e) // IE, Opera
isRightMB = e.button == 2;
alert("Right mouse button " + (isRightMB ? "" : " was not") + "clicked!");
}
回答by Phil Rykoff
have a look at the following jQuery code:
看看下面的jQuery代码：
$("#myId").mousedown(function(ev){
if(ev.which == 3)
{
alert("Right mouse button clicked on element with id myId");
}
});
The value of whichwill be:
whichwill的值是：
- 1for the left button
- 2for the middle button
- 3for the right button
- 1为左按钮
- 2中键
- 3为右键
回答by Radi Cho
You could use the event window.oncontextmenu, for example:
您可以使用 event window.oncontextmenu，例如：
window.oncontextmenu = function () {
alert('Right Click')
}<h1>Please Right Click here!</h1>回答by Eric
Ya, though w3c says the right click can be detected by the click event, onClick is not triggered through right click in usual browsers.
是的，虽然 w3c 说单击事件可以检测到右键单击，但在通常的浏览器中，不会通过右键单击来触发 onClick。
In fact, right click only trigger onMouseDown onMouseUp and onContextMenu.
实际上，右键单击仅触发 onMouseDown onMouseUp 和 onContextMenu。
Thus, you can regard "onContextMenu" as the right click event. It's an HTML5.0 standard.
因此，您可以将“onContextMenu”视为右键单击事件。这是一个 HTML5.0 标准。
回答by AlienKevin
If you want to detect right mouse click, you shouldn't use MouseEvent.whichproperty as it is non-standard and there's large incompatibility among browsers. (see MDN) You should instead use MouseEvent.button. It returns a number representing a given button:
如果要检测鼠标右键单击，则不应使用MouseEvent.which属性，因为它是非标准的，并且浏览器之间存在很大的不兼容性。（请参阅MDN）您应该改为使用MouseEvent.button. 它返回一个代表给定按钮的数字：
0: Main button pressed, usually the left button or the un-initialized state1: Auxiliary button pressed, usually the wheel button or the middle button (if present)2: Secondary button pressed, usually the right button3: Fourth button, typically the Browser Back button4: Fifth button, typically the Browser Forward button
0: 主键按下，一般为左键或未初始化状态1：按下的辅助按钮，通常是滚轮按钮或中间按钮（如果有）2: 次要按钮按下，通常是右键3：第四个按钮，通常是浏览器后退按钮4：第五个按钮，通常是浏览器前进按钮
MouseEvent.buttonhandles more input types than just standard mouse:
MouseEvent.button处理比标准鼠标更多的输入类型：
Buttons may be configured differently to the standard "left to right" layout. A mouse configured for left-handed use may have the button actions reversed. Some pointing devices only have one button and use keyboard or other input mechanisms to indicate main, secondary, auxilary, etc. Others may have many buttons mapped to different functions and button values.
按钮的配置可能与标准的“从左到右”布局不同。配置为左手使用的鼠标可能具有相反的按钮操作。一些指点设备只有一个按钮，并使用键盘或其他输入机制来指示主、次、辅助等。其他的可能有许多按钮映射到不同的功能和按钮值。
Reference:
参考：
回答by Timothy Khouri
No, but you can detect what mouse button was used in the "onmousedown" event... and from there determine if it was a "right-click".
不，但您可以检测在“onmousedown”事件中使用了什么鼠标按钮……并从那里确定它是否是“右键单击”。
回答by Frederic Leitenberger
The following code is using jQuery to generate a custom rightclickevent based on the default mousedownand mouseupevents.
It considers the following points:
以下代码使用 jQuery 生成rightclick基于默认mousedown和mouseup事件的自定义事件。它考虑了以下几点：
- trigger on mouseup
- trigger only when pressed mousedown on the same element before
- this code especially also works in JFX Webview (since the
contextmenuevent is not triggered there) - it does NOT trigger when the contextmenu key on the keyboard is pressed (like the solution with the
on('contextmenu', ...)does
- 鼠标抬起时触发
- 仅在之前在同一元素上按下鼠标时触发
- 此代码尤其适用于 JFX Webview（因为该
contextmenu事件未在那里触发） - 当按下键盘上的上下文菜单键时，它不会触发（就像使用 do 的解决方案
on('contextmenu', ...)一样
$(function ()
{ // global rightclick handler - trigger custom event "rightclick"
var mouseDownElements = [];
$(document).on('mousedown', '*', function(event)
{
if (event.which == 3)
{
mouseDownElements.push(this);
}
});
$(document).on('mouseup', '*', function(event)
{
if (event.which == 3 && mouseDownElements.indexOf(this) >= 0)
{
$(this).trigger('rightclick');
}
});
$(document).on('mouseup', function()
{
mouseDownElements.length = 0;
});
// disable contextmenu
$(document).on('contextmenu', function(event)
{
event.preventDefault();
});
});
// Usage:
$('#testButton').on('rightclick', function(event)
{
alert('this was a rightclick');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="testButton">Rightclick me</button>回答by Adnane Ar
That is the easiest way to fire it, and it works on all browsers except application webviews like ( CefSharp Chromium etc ... ). I hope my code will help you and good luck!
这是启动它的最简单方法，它适用于所有浏览器，除了应用程序 webviews（如（CefSharp Chromium 等））。我希望我的代码能帮助你并祝你好运！
const contentToRightClick=document.querySelector("div#contentToRightClick");
//const contentToRightClick=window; //If you want to add it into the whole document
contentToRightClick.oncontextmenu=function(e){
e=(e||window.event);
e.preventDefault();
console.log(e);
return false; //Remove it if you want to keep the default contextmenu
}div#contentToRightClick{
background-color: #eee;
border: 1px solid rgba(0,0,0,.2);
overflow: hidden;
padding: 20px;
height: 150px;
}<div id="contentToRightClick">Right click on the box !</div>回答by Poppy
window.oncontextmenu = function (e) {
e.preventDefault()
alert('Right Click')
}<h1>Please Right Click here!</h1>回答by imal hasaranga perera
Easiest way to get right click done is using
完成右键单击的最简单方法是使用
$('classx').on('contextmenu', function (event) {
});
Howeverthis is not cross browser solution, browsers behave differently for this event especially firefox and IE. I would recommend below for a cross browser solution
然而，这不是跨浏览器解决方案，浏览器对此事件的行为不同，尤其是 firefox 和 IE。我会推荐下面的跨浏览器解决方案
$('classx').on('mousedown', function (event) {
var keycode = ( event.keyCode ? event.keyCode : event.which );
if (keycode === 3) {
//your right click code goes here
}
});
