Прослушивание вызовов addEventListener для настраиваемого события

Question

Я пытаюсь создать собственное событие перетаскивания. Вот мой первоначальный псевдокод, обратите внимание, что я ушел из процесса очистки.

var dragEvent = new CustomEvent("drag"); 
var anArbitrairyElement = document.querySelector(".box"); 

anArbitrairyElement.addEventListener("drag", function() { 
    console.log("event received"); 
}); 

(function() { 
    var dragEventListeners = []; 

    window.addEventListener("mousedown", function (mousedownEvent) { 
     dragEventListeners.forEach(function (target) { 
      if (mousedownEvent.target === target) { 
       window.addEventListener("mousemove", function (mousemoveEvent) { 
        target.dispatchEvent(dragEvent); 
       }); 
      } 

      // ... 
     });   
    }); 

    // does something like this exist? 
    onDragEventAdded(function (listenerElement) { 
     dragEventListeners.push(listenerElement); 
    }); 
}()); 

Есть ли способ прослушивать вызовы addEventListener без перезаписи самой функции addEventListener? Решение должно закончиться вверх в этом быть возможно

document.querySelector(".someElement").addEventListener("drag", ...); 

В противном случае, есть еще один способ, как я мог бы достичь желаемого поведения создания события пользовательского перетаскивания?

Answer 1

Сделайте это следующим образом.

window.addEventListener("mousedown", function (mousedownEvent) { 
    var mouseMoveHandler = 
     function(element) { 
      return function(mouseMoveEvent) { 
       element.dispatchEvent(dragEvent); 
      } 
     }(mousedownEvent.target); 

     window.addEventListener("mousemove", mouseMoveHandler); 

    });   
}); 

Так что в этом случае на mousedown случае создается замыкание, которое вызовет событие перетаскивания на щелкнутом элементе. Вам не нужен массив элементов, которые были нажаты. Выбранный элемент уже введен в обработчик.

Не забудьте очистить слушателей от mouseup. Просто опустите mousemove прослушиватель на window

Answer 2

Для тех, кто хочет использовать событие перетаскивания, вот пример его использования.

var box1 = document.createElement("div"); 
 
var box2 = document.createElement("div"); 
 
var box3 = document.createElement("div"); 
 

 
document.body.appendChild(box1); 
 
document.body.appendChild(box2); 
 
document.body.appendChild(box3); 
 

 
box1.className = "box"; 
 
box2.className = "box"; 
 
box3.className = "box"; 
 

 
box1.innerHTML = "Drag me"; 
 
box2.innerHTML = "No drag"; 
 
box3.innerHTML = "Drag me"; 
 

 
function dragElement(event) { 
 
    event.target.style.top = parseInt(event.target.style.top.split("px")[0] || 0) + event.dy + "px"; 
 
    event.target.style.left = parseInt(event.target.style.left.split("px")[0] || 0) + event.dx + "px"; 
 
} 
 

 
box1.addEventListener("drag", dragElement); 
 
box3.addEventListener("drag", dragElement); 
 

 
// custom event logic starting here 
 
var dragEvent = new CustomEvent("drag"); 
 

 
window.addEventListener("mousedown", function (mousedownEvent) { 
 
    var mousePosition = {x: mousedownEvent.clientX, y: mousedownEvent.clientY}; 
 

 
    (function() { 
 
     var target = mousedownEvent.target; 
 
     console.log(target); 
 

 
     function moveHandler(event) { 
 
      var newMousePosition = {x: event.clientX, y: event.clientY}; 
 

 
      dragEvent.dx   = newMousePosition.x - mousePosition.x; 
 
      dragEvent.dy   = newMousePosition.y - mousePosition.y; 
 
      dragEvent.clientX = event.clientX; 
 
      dragEvent.clientY = event.clientY; 
 

 
      target.dispatchEvent(dragEvent); 
 

 
      mousePosition = newMousePosition; 
 
     } 
 

 
     function releaseHandler() { 
 
      window.removeEventListener("mousemove", moveHandler); 
 
      window.removeEventListener("mouseup", releaseHandler); 
 
     } 
 

 
     window.addEventListener("mousemove", moveHandler); 
 
     window.addEventListener("mouseup", releaseHandler); 
 
    }()); 
 

 
});

.box { 
 
    width: 75px; 
 
    height: 75px; 
 

 
    background-color: skyblue; 
 
    display: inline-block; 
 
    margin: 10px; 
 

 
    position: relative; 
 
    text-align: center; 
 
    
 
    font-family: helvetica; 
 
    color: white; 
 
    
 
    vertical-align: middle; 
 
    line-height: 75px; 
 
    font-weight: bold; 
 
}