JavaScript 优化拖移效果
上次我们在 Canvas 实现根据背景色更改前景色中使用了一个拖动效果，刚开始非常智障的用 Drag & Drop，后来由于我们更关注一个即时的反馈，所以用 mousedown / mousemove / mouseup。
最初我们绑定 mousemove 在待拖动的 element 中，结果在移动中如果速度过快，会导致 mousemove 离开 element，于是我们把 mousemove 改绑到 document 中。
这样的效果其实仍然有些卡，或者说移动的延迟，尽管最终会到达鼠标所在的位置，高速移动时却不时刻在鼠标下面。之后我们用捕获来代替默认 addEventListener 的冒泡阶段触发：
之后，如果需要在移动时取消所有鼠标的响应时间，可以通过调整 pointer-events 样式来修改，在变更拖动状态时修改 body 的 style 即可。
function preventGlobalMouseEvents () {
document.body.style['pointer-events'] = 'none';
}
function restoreGlobalMouseEvents () {
document.body.style['pointer-events'] = 'auto';
}
document.addEventListener('mousemove', event => {
if (drag) {
text.style.left = (event.pageX - text.clientWidth / 2) + 'px';
text.style.top = (event.pageY - text.clientHeight / 2) + 'px';
const [r, g, b] = echoColor(event.pageX, event.pageY, ctx);
text.style.color = gray(r, g, b) / 255 < 0.5 ? '#fff' : '#000';
}
}, false);
text.addEventListener('mousedown', event => {
drag = true;
}, false);
document.addEventListener('mouseup', event => {
drag = false;
}, false);参考：
植入部分
如果您觉得文章不错，可以通过赞助支持我。
如果您不希望打赏，也可以通过关闭广告屏蔽插件的形式帮助网站运作。