为啥小弟我的canvas的鼠标事件不会触发

Posted 2023-05-18

参考技术A canvas有默认的height，不过它的默认width是0，所以不会触发。 再理解，你需要设置子项的canvas.Top 与Left
没有具体的w与h ，都没有办法设置。

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

【中文标题】为啥鼠标右键单击在按下时会触发“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 中存在一个错误。我想知道这是否有原因，也许我们在打开菜单时无法启动指针，因为那你如何检测到点击它？我不确定，但真的很想知道。