Question

我正在学习使用JavaScript创建可拖动项。但是，这并不流畅，有时物品会卡住。在将mouseup和mousemove的drag.addEventListener更改为document.addEventListener之后，它变得平滑且永不卡住。我可以知道为什么吗？我想知道为什么即使我的鼠标不在容器内，它仍然可以工作吗？另外，我看到指南将true用于三个侦听器的第三个参数，例如：

document.addEventListener('mouseup', function() {
 isDown = false;
}, true);

我可以知道为什么捕获该快照吗？非常感谢！

html

css

#drag {
  height:100px;
  width:100px;
  background-color:#2ADAE8;
  cursor:pointer;
  position:absolute;
  left:0px;
  top:0px;
}

js

let diff=[0,0];
let isMouseDown=false;
let drag=document.getElementById('drag');

drag.addEventListener('mousedown',function(e) {
  isMouseDown=true;
  diff=[e.clientX-drag.offsetLeft,e.clientY-drag.offsetTop];

})

drag.addEventListener('mouseup',function(e) {
  isMouseDown=false;
})

drag.addEventListener('mousemove',function(e) {
  if (isMouseDown) {
    drag.style.left=`${e.clientX-diff[0]}px`;
    drag.style.top=`${e.clientY-diff[1]}px`;
  }

})

创建可拖动元素时，将addEventListener设置为文档，将addEventListener设置为元素

0 个答案: