右键单击是 Javascript 事件吗？

Posted 2023-02-22

【中文标题】右键单击是 Javascript 事件吗？

【英文标题】：Is right click a Javascript event?

【发布时间】：2011-01-25 05:37:20

【问题描述】：

如果是这样，我该如何使用它？

【参考方案1】：

是的 - 是的！

function doSomething(e) 
    var rightclick;
    if (!e) var e = window.event;
    if (e.which) rightclick = (e.which == 3);
    else if (e.button) rightclick = (e.button == 2);
    alert('Rightclick: ' + rightclick); // true or false

【讨论】：

嗯 - 从技术上讲，它不是“事件”，但可以使用。

@TimothyKhouri（以及这里的其他人）：这是一个兼容的事件监听器函数。您可以将函数对象本身作为第二个参数传递给addEventListener，然后它会在指定事件发生时调用它。例如：elem.addEventListener("click", doSomething)

【参考方案2】：

不，但您可以检测在“onmousedown”事件中使用了哪个鼠标按钮...并从那里确定它是否是“右键单击”。

【讨论】：

@Brian：右击会触发onmousedown、onmouseup和onclick。但是，如果您正在考虑覆盖右键单击菜单，则这些事件不是您应该使用的（请参阅下面的答案）。

【参考方案3】：

是的，它是一个 javascript mousedown 事件。有一个 jQuery plugin 也可以做到这一点

【参考方案4】：

正如其他人提到的，可以检测到鼠标右键through the usual mouse events (mousedown, mouseup, click)。但是，如果您在弹出右键菜单时正在寻找触发事件，那么您就找错地方了。右键单击/上下文菜单也可通过键盘访问（Windows 和某些 Linux 上的 shift+F10 或上下文菜单键）。在这种情况下，您要查找的事件是oncontextmenu：

window.oncontextmenu = function ()

    showCustomMenu();
    return false;     // cancel default menu

对于鼠标事件本身，浏览器会为事件对象设置一个属性，该属性可以从事件处理函数中访问：

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!");
 

window.oncontextmenu - MDC

【讨论】：

就像 which/button 问题一样，“oncontextmenu”在所有浏览器中的实现方式并不相同...请参阅quirksmode.org/dom/events/contextmenu.html 了解一些“陷阱”。

请记住，在 Mac FF 上 ctrl+rightclick 将作为鼠标左键单击 (e.which === 1)，而在 Mac Chrome 上ctrl+rightclick 将作为预期的鼠标右键单击 (e.ctrlKey && e.which === 3)。

在 Chrome 59 中，鼠标右键会触发 onmousedown 和 onmouseup，但不会触发 onclick。显然，在 Chrome 中，onclick 仅针对鼠标左键触发。 （是的，伙计们，我测试了很多次）为了检测鼠标右键，你必须结合onmousedown和onmouseup，或者使用oncontextmenu。

【参考方案5】：

看看下面的 jQuery 代码：

$("#myId").mousedown(function(ev)
      if(ev.which == 3)
      
            alert("Right mouse button clicked on element with id myId");
      
);

which 的值将是：

1

表示左侧按钮

2

用于中间按钮

3

表示右键

【讨论】：

Eeeew，太可怕了！为什么.which 与.button 不一样？ O.o .button => 0,1,2; which => 1,2,3。这是错误的。

【参考方案6】：

是的，虽然 w3c 说单击事件可以检测到右键单击，但在通常的浏览器中不会通过右键单击触发 onClick。

其实右键onMouseDown只会触发onMouseUp和onContextMenu。

因此，您可以将“onContextMenu”视为右键单击事件。这是一个 HTML5.0 标准。

【讨论】：

是的，听起来是个不错的解决方案，尤其是在您针对较新的浏览器时。我不认为这只是 HTML5.0，因为即使 IE 5.5 在元素上也支持它！以下是有关哪些浏览器支持它的更多信息：quirksmode.org/dom/events/contextmenu.html

【参考方案7】：

使用jQuery库处理事件

$(window).on("contextmenu", function(e)

   alert("Right click");
)

【参考方案8】：

是的，oncontextmenu 可能是最好的选择，但请注意，它会在鼠标按下时触发，而单击会在鼠标抬起时触发。

其他相关问题是关于双击右键 - 显然不支持，除非通过手动计时器检查。您可能希望能够进行右键双击的一个原因是您是否需要/想要支持左手鼠标输入（按钮反转）。浏览器实现似乎对我们应该如何使用可用的输入设备做出了很多假设。

【参考方案9】：

您可以使用事件window.oncontextmenu，例如：

window.oncontextmenu = function () 
  alert('Right Click')

<h1>Please Right Click here!</h1>

【讨论】：

这也会触发左mb

真棒+1，现在我如何阻止上下文菜单？ @user12345678

@Shayan e.preventDefault()

@BrianAllanWest 是 jQuery 吗？我不知道如何使用它。 window.oncontextmenu = function () e.preventDefault() 没用。

@Shayan，不，它是原始的 javascript... 你会像这样使用它... window.oncontextmenu = function(e) e.preventDefault(); 这可以防止默认行为按下上下文菜单（即：鼠标右键单击或在 mac 上按住）时的浏览器。

【参考方案10】：

以下代码使用 jQuery 根据默认的 mousedown 和 mouseup 事件生成自定义的 rightclick 事件。 它考虑了以下几点：

mouseup 触发 仅在之前在同一元素上按下鼠标时触发 这段代码尤其适用于 JFX Webview（因为contextmenu 事件没有在那里触发） 当按下键盘上的上下文菜单键时它不会触发（就像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>

【参考方案11】：

如果您想在右键单击事件时调用该函数意味着我们可以使用以下

 <html lang="en" oncontextmenu="func(); return false;">
 </html>

<script>
function func()
alert("Yes");

</script>

【参考方案12】：

完成右键单击的最简单方法是使用

 $('classx').on('contextmenu', function (event) 

 );

但是这不是跨浏览器解决方案，浏览器对此事件的行为不同，尤其是 firefox 和 IE。我会在下面推荐一个跨浏览器解决方案

$('classx').on('mousedown', function (event) 
    var keycode = ( event.keyCode ? event.keyCode : event.which );
    if (keycode === 3) 
       //your right click code goes here      
    
);

【参考方案13】：

这对我有用

if (evt.xa.which == 3) 

    alert("Right mouse clicked");

【参考方案14】：

如果你想检测鼠标右键，你不应该使用MouseEvent.which属性，因为它是非标准的，并且浏览器之间存在很大的不兼容。 （参见MDN）您应该改用MouseEvent.button。它返回一个代表给定按钮的数字：

0: 主键按下，一般是左键或者未初始化状态 1：按下辅助按钮，通常是滚轮按钮或中间按钮（如果有） 2: 按下第二个按钮，通常是右键 3：第四个按钮，通常是浏览器后退按钮 4：第五个按钮，通常是浏览器前进按钮

MouseEvent.button 处理的输入类型不仅仅是标准鼠标：

按钮的配置可能与标准不同 “从左到右”的布局。配置为左手使用的鼠标可能 反转按钮操作。一些指点设备只有一个 按钮并使用键盘或其他输入机制来指示主要， 辅助，辅助等。其他人可能有许多按钮映射到 不同的功能和按钮值。

参考：

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

【参考方案15】：

这是触发它的最简单方法，它适用于所有浏览器，除了应用程序 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>

【参考方案16】：

window.oncontextmenu = function (e) 
  e.preventDefault()
  alert('Right Click')

<h1>Please Right Click here!</h1>

【参考方案17】：

尝试使用which 和/或button 属性。

---

function onMouseDown(e)

    if (e.which === 1 || e.button === 0)
    
        console.log('Left mouse button at ' + e.clientX + 'x' + e.clientY);
    

    if (e.which === 2 || e.button === 1)
    
        console.log('Middle mouse button at ' + e.clientX + 'x' + e.clientY);
    

    if (e.which === 3 || e.button === 2)
    
        console.log('Right mouse button at ' + e.clientX + 'x' + e.clientY);
    

    if (e.which === 4 || e.button === 3) 
        console.log('Backward mouse button at ' + e.clientX + 'x' + e.clientY);
    

    if (e.which === 5 || e.button === 4) 
        console.log('Forward mouse button at ' + e.clientX + 'x' + e.clientY);
    


window.addEventListener("mousedown", onMouseDown);

document.addEventListener("contextmenu", function(e)

    e.preventDefault()
);

Demo.

---

MacOS

在 Windows 和 Linux 上，有修饰键 Alt、Shift 和 Ctrl。在 Mac 上还有一个：Cmd，对应属性metaKey... 即使我们想强制 Mac 用户 Ctrl+click - 这有点困难。问题是：带有 Ctrl 的 left-click 在 MacOS 上被解释为 right-click，它会生成 contextmenu 事件，而不是像 Windows/Linux 那样的 click。 因此，如果我们希望所有操作系统的用户都感到舒适，那么与ctrlKey 一起，我们应该检查metaKey。 对于 JS 代码，这意味着我们应该检查 if (event.ctrlKey || event.metaKey)...strong text

来源：In this chapter we'll get into more details about mouse events and their properties...

【讨论】：

不适用于 mac.. 在 mac 上，右键单击是 control + click

@LeoCavalcante 谢谢 ^^ 从资源中添加了有关 MacOS 的信息。

【参考方案18】：

大多数使用mouseup 或contextmenu 事件的给定解决方案会在每次鼠标右键上升时触发，但它们不会检查之前是否下降。

---

如果您正在寻找 真正的右键单击 事件，该事件仅在鼠标按钮被在同一元素内按下并释放时触发，那么您应该使用auxclick 事件。由于这会针对每个非主鼠标按钮触发，因此您还应该通过检查 button 属性来过滤其他事件。

window.addEventListener("auxclick", (event) => 
  if (event.button === 2) alert("Right click");
);

您还可以通过在 JavaScript 开头添加以下代码来创建自己的右键单击事件：

  const rightClickEvent = new CustomEvent('rightclick',  bubbles: true );
  window.addEventListener("auxclick", (event) => 
    if (event.button === 2) 
      event.target.dispatchEvent(rightClickEvent);
    
  );

然后您可以通过addEventListener 方法监听右键单击事件，如下所示：

your_element.addEventListener("rightclick", your_function);

---

在MDN 上阅读有关auxclick 活动的更多信息。

【参考方案19】：

是的，这是一个 Javascript 事件，您可以使用以下代码对其进行测试。

<div id="contextArea">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>



    <script>
    var contextarea = $("#contextArea");
    
    contextarea.contextmenu(function (e) 
      e.preventDefault();
      console.log("right click from p tag");
    )
    </script>