Question

寻找一种跨浏览器的方式来区分Windows计算机上的右键单击和上下文菜单键。这是我到目前为止的内容，但这并不完美：

document.addEventListener('contextmenu', (event) => {
  // distinguish between right-click and context menu key here
});

IE，边缘：是上下文菜单键，如果event.clientX <= 0 && event.clientY <= 0

FF，Safari：是上下文菜单键，如果event.which === 1

Chrome浏览器：是上下文菜单键，如果event.which === 0

这不是完美的，因为技术上用户可以在其窗口的左上角单击鼠标右键，事件位置为（0，0），而我的逻辑认为是IE，Edge和FF的按键。我正在寻找更坚固，更简单的东西。是否存在？我不想在mousedown或keydown上管理第二个事件处理程序来区分事件，我宁愿只使用contextmenu事件。

Answer 1

尝试使用按钮代码和pointerId（到Edge，检测是否在事件中触发了鼠标），这是代码[已测试]：

//declaring the event
document.addEventListener('contextmenu', (event) => {
//get Edge 
    if(window.navigator.userAgent.indexOf("Edge") > -1){
        switch(event.pointerId) {
            case 0:
                //this is context key!!
                console.log("Context Key")
                break;
            case 1:
                //this is right click!!
                console.log("Right click")
                break;
    }
    }else{
         switch(event.button) {
             case 0:
                 //this is context key!!
                 console.log("Context Key")
                 break;
             case 2:
                 //this is right click!!
                 console.log("Right click")
                 break;
        }
    }  
});

跨浏览器区分右键单击和上下文菜单键

1 个答案: