右键单击Javascript事件吗?


173

右键单击Javascript事件吗?如果可以,该如何使用?

Answers:


188

正如其他人提到的那样,可以通过常规鼠标事件(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.oncontext菜单-MDC


5
就像哪个/按钮问题一样,并非在所有浏览器中都实现了“ oncontextmenu”……请参见quirksmode.org/dom/events/contextmenu.html了解一些“陷阱”。
smencer 2010年

3
@AndyE嗨,安迪,表达式(isRightMB?"was not" : "")应该是(isRightMB?"was" : "was not")。对 ?请帮助进行审查。
Joe.wang 2014年

1
@Joe:有趣的是,如何在没有任何人注意的情况下获得了32票赞成和4年的投票;-)我想我可以被原谅-当我写下答案时是00:30 am!
Andy E

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

8
在Chrome 59中,鼠标右键触发onmousedownonmouseup,但不会触发onclick。显然,在Chrome中,onclick仅是鼠标左键触发的。(是的,我对此进行了多次测试)要检测鼠标右键,您必须组合onmousedownonmouseup,或使用oncontextmenu
Venryx

27

看看下面的jQuery代码:

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

的值为which

  • 1代表左键
  • 2为中间按钮
  • 3为右键

2
哎呀,太可怕了!为什么.which不一样.button?Oo .button=> 0,1,2 ; which=> 1,2,3。那是错误的。
本·菲利普

11

您可以使用event window.oncontextmenu,例如:

window.oncontextmenu = function () {
  alert('Right Click')
}
<h1>Please Right Click here!</h1>


这也会触发左mb
亚历克斯(Alex)

很棒的+1,现在如何阻止上下文菜单?@ user12345678
傻眼了

2
@Shayan e.preventDefault()
Brian Allan West

@BrianAllanWest那是jQuery吗?我不知道该怎么用。window.oncontextmenu = function () { e.preventDefault() }没用。
Shayan

2
@Shayan,不,它不是原始的javascript ...您将像这样使用它... window.oncontextmenu = function(e){e.preventDefault();}这样可以防止上下文菜单出现浏览器的默认行为(即:在Mac上单击鼠标右键或按住不放)。
Brian Allan West

6

是的,尽管w3c表示可以通过click事件检测到右键单击,但是在通常的浏览器中,onClick不会通过右键单击来触发。

实际上,右键单击仅触发onMouseDown,onMouseUp和onContextMenu。

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


1
是的,听起来像是一个很好的解决方案,尤其是在您针对较新的浏览器的情况下。我不认为这只是HTML5.0,因为IE 5.5甚至在元素上也支持它!以下是有关哪些浏览器支持的更多信息:quirksmode.org/dom/events/contextmenu.html
Ignas2526 2013年

5

如果要检测鼠标右键,则不应使用MouseEvent.which属性,因为它是非标准的,并且浏览器之间存在很大的不兼容性。(请参阅MDN)您应该改为使用MouseEvent.button。它返回一个代表给定按钮的数字:

  • 0:按下主按钮,通常是向左按钮或未初始化状态
  • 1:按下辅助按钮,通常是滚轮按钮或中间按钮(如果有)
  • 2:按下辅助按钮,通常是右键
  • 3:第四个按钮,通常是“浏览器后退”按钮
  • 4:第五个按钮,通常是“浏览器前进”按钮

MouseEvent.button 除了标准鼠标外,还可以处理更多输入类型:

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

参考:

  1. https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/which
  2. https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/button

希望这是我在搜索时看到的第一个答案
GunnarMárÓttarsson19年

3

否,但是您可以检测“ onmousedown”事件中使用了什么鼠标按钮...,然后确定是否是“右键单击”。


@布赖恩:右键点击就会触发onmousedownonmouseuponclick。但是,如果您要覆盖右键单击菜单,则这些事件不是您应该使用的事件(请参见下面的答案)。
Andy E 2010年

2

以下代码使用jQuery rightclick根据默认mousedownmouseup事件生成自定义事件。它考虑了以下几点:

  • 在mouseup上触发
  • 仅当在同一元素上按下鼠标时才触发
  • 此代码尤其适用于JFX Webview(因为contextmenu未在此处触发事件)
  • 当按下键盘上的contextmenu键时,它不会触发(例如使用on('contextmenu', ...)do

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


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
}

好吧-从技术上讲,它不是“事件”,但可以使用。
ChickenMilkBomb

@TimothyKhouri(以及此处的其他任何人):这是兼容的事件侦听器功能。您将把函数对象本身作为第二个参数传递给addEventListener,然后在发生指定事件时调用它。例如:elem.addEventListener("click", doSomething)
John Weisz

1

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

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


1

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

 $('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      
    }
});

1

这是触发它的最简单方法,它适用于除(CefSharp Chromium等...)应用程序Web视图之外的所有浏览器。希望我的代码对您有帮助,祝您好运!

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>


1

window.oncontextmenu = function (e) {
  e.preventDefault()
  alert('Right Click')
}
<h1>Please Right Click here!</h1>


0

如果您想在右键单击事件时调用该函数,则可以使用以下命令

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

<script>
function func(){
alert("Yes");
}
</script>


0

尝试使用whichand / or button属性

演示

function onClick(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 ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 3 || e.button === 2) {
    console.log('Right mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 4 || e.button === 3) {
    console.log('Backward mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 5 || e.button === 4) {
    console.log('Forward mouse button ' + e.clientX + 'x' + e.clientY);
  }
}
window.addEventListener("mousedown", onClick);

一些信息在这里


-1

使用jQuery库 处理事件

$(window).on("contextmenu", function(e)
{
   alert("Right click");
})

-1

要使用鼠标右键单击,可以使用“ oncontextmenu”事件。下面是一个示例:

 document.body.oncontextmenu=function(event) {
     alert(" Right click! ");
 };

上面的代码在按下右键时会提示一些文本。如果您不希望显示浏览器的默认菜单,则可以添加return false;。在功能内容的末尾。谢谢。


如果您的答案包含一个原始的JS解决方案,那么它不仅会简单地回答一些框架的答案,而且会对其进行详细说明,以描述如何更好地使用您的框架。
Xaniff '16

好...谢谢您的推荐。.vanilA js其实也很容易
Sayanjyoti Das

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.