为啥鼠标右键单击在按下时会触发“pointerdown”事件,但在释放时不会触发“pointerup”事件?

Posted

技术标签:

【中文标题】为啥鼠标右键单击在按下时会触发“pointerdown”事件,但在释放时不会触发“pointerup”事件?【英文标题】:Why does a mouse right click fire the "pointerdown" event when pressed down but not the "pointerup" event when released?为什么鼠标右键单击在按下时会触发“pointerdown”事件,但在释放时不会触发“pointerup”事件? 【发布时间】:2020-04-11 04:39:50 【问题描述】:

我使用pointerevents 而不是鼠标事件来获得通用指针解决方案,而不必单独考虑触摸与鼠标事件等。

问题是当我按下鼠标右键时,pointerdown事件正常触发(如预期),但释放它时,pointerup事件没有触发(意外)。

我在这里创建了一个最小的可重现案例: https://codesandbox.io/s/proud-smoke-1x2w5?file=/src/index.js

我在这里制作了一个关于这个问题的视频: https://app.usebubbles.com/6a21646e-13d2-4a7f-a598-dfad35a9c0d3

为什么鼠标右键按下时会触发“pointerdown”事件,但释放时不会触发“pointerup”事件?

请注意,这是在 Chrome 81 中 (https://www.whatsmybrowser.org/b/VJUHP)

【问题讨论】:

【参考方案1】:

它似乎与"contextmenu"有关,检查下面的sn-p,如果您阻止默认行为,则右键单击会触发"pointerup"事件。

const app = document.getElementById("app");
const count = document.getElementById("count");

const writeCount = (n) => (count.innerhtml = n);

noContextMenu.addEventListener("contextmenu", (e) => 
  e.preventDefault();
);

let n = 0;
writeCount(0);

app.addEventListener("pointerdown", (e) => 
  writeCount(++n);
  eventType.innerHTML = "pointerdown";
);

app.addEventListener("pointerup", (e) => 
  writeCount(--n);
  eventType.innerHTML = "pointerup";
);
body 
  font-family: sans-serif;


#contextmenu 
  margin: 10px;
  padding: 20px;
  width: 100px;
  float: left;
  border: 1px solid blue;


#noContextMenu 
  margin: 10px;
  padding: 20px;
  width: 100px;
  float: left;
  border: 1px solid darkviolet;
<div id="app">
  <div>
    Event type: (<span id="count"></span>) <span id="eventType"></span>
  </div>
  <div id="contextmenu">context menu</div>
  <div id="noContextMenu">noContextMenu</div>
</div>

【讨论】:

那么这似乎是一个 chrome 错误? 我不这么认为,我正试图进一步调查。看来右键单击并不是真正的“指针事件”,让我用一些额外的 div 更新我的答案,然后您会看到当我们记录右键单击事件时它没有类型指针,所以也许这就是为什么没有触发“pointerup”的原因。 如果不是指针事件,那为什么要触发pointerdown呢? 你说得对,它似乎确实是一个指针事件 :) 我会进一步调查,也很想知道。 现在放弃吧,我认为您可能是对的,并且在打开上下文菜单后触发 pointerup 时,Chrome 中存在一个错误。我想知道这是否有原因,也许我们在打开菜单时无法启动指针,因为那你如何检测到点击它?我不确定,但真的很想知道。

以上是关于为啥鼠标右键单击在按下时会触发“pointerdown”事件,但在释放时不会触发“pointerup”事件?的主要内容,如果未能解决你的问题,请参考以下文章

为啥 jQuery 的 .change() 事件只在鼠标右键单击时触发?

为啥我的 UIButton 在按下时有时不会立即做出反应?

长按右键触发

当鼠标仍然按下时,如何防止在 Winforms Listview 中立即触发 MouseUp 事件?

鼠标事件

JS事件