正在監聽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

按照以下方法操作。因此，在這種情況下，對mousedown事件

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

     window.addEventListener("mousemove", mouseMoveHandler); 

    });   
}); 

創建閉合，將點擊的元素上觸發拖動事件。你不需要被點擊的元素數組。點擊的元素已經注入處理程序。

不要忘記清潔聽衆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; 
 
}