javascript - 在 window.resize 事件之后没有注册 Mousemove 事件

Question

无论出于何种原因，在 Chrome 中，紧跟在 mousedown 事件之后的 mousemove 事件不会触发，或者会在一小段时间(500- 1000 毫秒？)在 mousedown 事件之后。

奇怪的是这个问题在 codepen 上不存在(在 Chrome 上也不存在)并且代码是完全一样的...... Firefox、Edge 等也没有问题，只有在 Chrome 上才有.

Here is a codepen nonetheless.亲自测试一下。

将这段代码复制并粘贴到实际的.html、.css 和.js 文件中，然后直接在浏览器中运行它，您会注意到paper.onmousemove 没有触发或注册在 window.resize 事件之后的一小段时间内立即执行。

这一切都没有任何意义!

有人知道发生了什么事吗？ 为什么它在 codepen(以及所有其他浏览器)中工作正常，但不能直接在浏览器中工作？!

我发现了 codepen 版本的一个问题，它产生了一个非常相似的错误(但在开始时涉及几个额外的步骤)。

1. 在白色区域拖动鼠标创建一个元素
2. 通过单击选择该元素
3. 将该元素拖到页面上的任意位置
4. 调整浏览器大小并立即尝试通过拖动创建另一个元素

但是，在 codepen 上，mousedown 在这种情况下不会触发，而如果直接在浏览器中查看，mousemove 不会触发。同样，存在差异，这非常奇怪。

更新

事实证明它只在开发者控制台打开时发生，这就是为什么它没有在 codepen 中发生。

Answer 1

这似乎是 Chrome DevTools 的一些奇怪之处。您描述的错误似乎只在 DevTools 打开时发生。当您关闭 DevTools 时它会消失。这可能只是一个奇怪的巧合，但当右上角的分辨率标签消失时，它会立即开始注销 mousemove 事件。

话虽这么说，您有 onmousemove 和 addEventListener 的组合。例如你有两个

paper.addEventListener('mouseup', checkMouseUp)

和

paper.onmouseup = function(event) {}

我不确定这是否是 DevTools 问题的原因，但这可能会导致意想不到的后果，因为 paper 现在有两个单独分配的 mouseup 函数。对于您的情况，我会坚持使用 addEventListener。