javascript - 传入的事件处理程序相同，removeEventListener() 为什么不能移除事件？

问题描述

问 题

封装了一个 dragdrop 函数，可以对 DOM 元素执行拖放操作，代码如下：

/*
 * 接收一个 DOM 元素作为参数，返回一个对象
 * dragsrop(ele).register() 允许对 ele 元素执行拖放操作
 * dragsrop(ele).register() 移除与拖放相关的事件
 */
var dragdrop = function(ele) {
    var diffX = 0;    // 鼠标距离拖放元素左上角的距离
    var    diffY = 0;    // 鼠标距离拖放元素左上角的距离
    var    dragging = false;    // 是否执行拖动操作
    var    target = null;       // 拖动的目标元素

    var handler = function(e) {
        
        switch(e.type) {
            case "mousedown": 
                target = e.target;
                dragging = true;
                diffX = e.clientX - target.offsetLeft;
                diffY = e.clientY - target.offsetTop;
                break;

            case "mousemove":
                if(dragging === true) {
                    var top = e.clientY - diffY;
                    var left = e.clientX - diffX;
                    target.style.top = top + "px";
                    target.style.left = left + "px";
                }
                break;

            case "mouseup":
                dragging = false;
                target = null;
                handler = null;
                break;
        }
    }

    return {
        register: function() {
            ele.addEventListener("mousedown", handler, false);
            document.addEventListener("mousemove", handler, false);
            document.addEventListener("mouseup", handler, false);
        },
        remove: function() {
            ele.removeEventListener("mousedown", handler, false);
            document.removeEventListener("mousemove", handler, false);
            document.removeEventListener("mouseup", handler, false);
        }
    }
}


// 获取 DOM 元素
var test = document.getElementById("test");

// 注册事件
dragdrop(test).register();

// 移除事件
dragdrop(test).remove();

拖放操作是没有问题的，但是不能移除事件，也就是代码中的

dragdrop(test).remove();

这句话没有效果，不知道为什么？？？

我知道通过 addEventListener() 注册的事件需要 removeEventListener() 来解除，而且传入的函数必须一样，但是我确实是传的同一个函数呀，都是传的 handler ，为什么不能移除事件？

解决方案

因为你那种写法是分别两个不同的对象，应该这样
var obj = dragdrop(test);
obj.register();
obj..remove();

这篇关于javascript - 传入的事件处理程序相同，removeEventListener() 为什么不能移除事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！