JavaScript 中按下并释放鼠标右键后调用函数？

Question

我正在使用 JavaScript 制作客户端小程序。当在某个元素上单击左侧按钮以及单击右侧按钮时，我需要某些功能。左右功能相互抵消，因此 UI 中需要对称。

我可以在左侧按钮上设置一个事件就好了：

element.onclick = function(e) { doSomething(); }

这很好，因为它会检测按钮是否在同一元素上被按下和释放，并且仅在释放按钮时触发。这正是我想要的。但右键比较难。执行此操作的标准方法似乎是这样的：

element.oncontextmenu = function(e) { undoSomething(); return false; }

但这行为不同：事件发生在按下按钮时（而不是释放按钮时），并且没有检查来确保完整的单击发生在同一元素上。 （我已经在 Firefox 和 Chromium 上对此进行了测试。）当发生完全右键单击（向下和向上）时是否会触发另一个事件？或者我需要用

onmousedown

和

onmouseup

来进行我自己的检查吗？

（另外，在有人指出之前 - 是的，并不是每个人都有“右键”。但该功能并不是严格需要的，因此该产品应该可以与触摸屏一起使用。）

谢谢。

Answer 1

使用

mouseup

事件 并确定在事件处理程序中按下了哪个按钮。您还可以使用

event.target

来确定单击的元素是什么。

并且，不要使用事件属性来设置事件，请使用

.addEventListener()

的现代标准方法。

let lastElement = null;

document.addEventListener("mousedown", function(event){
  lastElement = event.target;
});

document.addEventListener("mouseup", function(event){
  console.log("You clicked and released the " + event.button + " button.");
  console.log("You were on the " + lastElement + " when you clicked the mouse and you were on the " + event.target + " element when you released the mouse.");
});

<p>Try right-clicking on the next element and (without releasing the mouse) drag over to the heading and then release the mouse.</p>
<div>Item One</div>
<h1>Item Two</h1>