addEventListener для документа против addEventListener для элемента при создании перетаскиваемого элемента - PullRequest
Новая
       5

addEventListener для документа против addEventListener для элемента при создании перетаскиваемого элемента

0 голосов
/ 11 мая 2019

Я учусь создавать перетаскиваемый элемент, используя JavaScript.Тем не менее, это не гладко, и иногда элемент застрянет.После того как я изменил drag.addEventListener для mouseup и mousemove на 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`;
  }

})
...