javascript - 如何添加同时单击两个鼠标按钮的事件监听器？

Question

我在互联网上没有找到任何示例，而且 Vue 本身仅分别支持右键单击和左键单击，这很奇怪，因为在我看来，这是一个相当基本的事情，可以使用纯 Javascript 轻松完成。

我只需要一种方法，仅在按下两个鼠标按钮时触发事件，并且无需为单独的鼠标按钮触发任何事件 - 这在 Vue 中可能吗？

Answer 1

实现如下。在任何地方“同时单击”进行测试。您可以调整超时值以获得更高的精度。

let leftClick, rightClick;

window.addEventListener('mousedown', event => {
  leftClick = event.button === 0 || leftClick;
  rightClick = event.button === 2 || rightClick;
  
  if (leftClick && rightClick) {

    // your logic here
    console.log("both clicked");

  } else {
    setTimeout(() => {
      leftClick = false;
      rightClick = false;
    }, 200); // <-- timeout value
  }
});


// prevent context menu
window.addEventListener('contextmenu', event => {
  if (leftClick && rightClick) event.preventDefault();
});