问题描述
最近在开发一个仿 excalidraw
Web 应用的时候遇到了一个小 bug:
- 当我双击页面任意一处地方后,拖拽随即失效;
- 每当拖拽时鼠标指针会变为
copy
样式(此时我的body
元素的cursor
属性为default
); - 对
window
添加的mousemove
监听器在拖拽进行期间也不再随着移动触发。
解决
焦点转移
当你双击某个元素时,浏览器可能将焦点(focus)转移到了该元素,从而停止在 canvas
上监听 mousemove
事件。
However,并不是这个原因。
事件捕获
在某些情况下,双击事件可能会触发浏览器的默认行为,如文本选择、窗口最大化等。这可能会干扰事件的正常传播。
由于拖动开始对应的是 dragstart
事件,所以在双击后拖动可能将会触发浏览器的 dragstart
事件,因此必须阻止 dragstart
事件:
document.addEventListener('dragstart', (event) => {
event.preventDefault(); // 阻止拖拽行为
});
运行,问题解决。🎉🎉