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


当前回答

正如其他人所提到的,可以通过通常的鼠标事件(鼠标下拉、鼠标上拉、单击)来检测鼠标右键。但是,如果您在弹出右键菜单时寻找触发事件,那么就找错地方了。右键单击/上下文菜单也可以通过键盘(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

其他回答

是的,这是一个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>

这是最简单的方法,它可以在所有浏览器上运行,除了应用程序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>

在JQuery中,您可以使用以下代码检测它:

$('.target').on('contextmenu', function (evt) { evt.preventDefault(); }); $('.target').mouseup(function (evt) { if (evt.which === 3) { // right-click $(this).css("background-color","blue"); $(this).text("RIGHT"); } else if (evt.which === 1) { $(this).css("background-color","red"); $(this).text("LEFT"); } }); .target { display: inline-block; height: 100px; width: 100px; background: gray; text-align: center; color: white; font-size: 25px; vertical-align: middle; margin: 25px; } .container { width: 100%; height: 140px; background: #AAA; vertical-align: middle; text-align: center; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="target" id="target">Click</div> <div class="target" id="target">Right</div> <div class="target" id="target">Click me!</div> </div>

For track right click 

window.oncontextmenu = () =>{

console.log("Right click")

}

仅适用于右键单击

看看下面的jQuery代码:

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

的值为:

1为左键 2为中间按钮 3为右键