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

对于任何想要使用拖动事件的人来说，这是一个利用它的例子。

＆＃13;

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);
    }());

});

＆＃13;

.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;
}

＆＃13;

侦听addEventListener调用自定义事件

2 个答案: