右击是Javascript事件吗?如果是,我该如何使用它?


当前回答

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


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

窗口。addEventListener("auxclick", (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事件的信息。

其他回答

正如其他人所提到的,可以通过通常的鼠标事件(鼠标下拉、鼠标上拉、单击)来检测鼠标右键。但是,如果您在弹出右键菜单时寻找触发事件,那么就找错地方了。右键单击/上下文菜单也可以通过键盘(shift+F10或上下文菜单键在Windows和一些Linux)访问。在这种情况下,你正在寻找的事件是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!");
} 

窗口。oncontextmenu - MDC

这是最简单的方法,它可以在所有浏览器上运行,除了应用程序web视图,如(CefSharp铬等…). 我希望我的代码能帮助到你,祝你好运!

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>

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


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

窗口。addEventListener("auxclick", (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事件的信息。

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

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

是的,它是!

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
}