gpt4 book ai didi

javascript - 无法删除(绑定(bind)的)事件监听器

转载 作者:行者123 更新时间:2023-11-29 17:14:40 28 4
gpt4 key购买 nike

我是 javascript 的新手,我遇到了以下问题,在多次搜索后我无法在以前的答案中找到它(希望这不是重复的)。

我有以下模块/类。假设我正在尝试实现一个可以在屏幕上拖动的组件。当用户第一次点击它时,我们开始监听windowmousemove事件,以了解用户移动到哪里了鼠标到。一旦用户释放鼠标,我们要删除窗口的事件监听器。代码非常简单,如果我只是在 iife 之外编写代码,它就可以工作。但是,目前 removeEventListener 根本不起作用。我猜它可能与 clousurescope 或其他东西有关,但我完全想念它。非常感谢您,这是代码:

MyClass.js

 var myNamespace = myNamespace || {};
(function(myNamespace){

var onMouseDragDown = function(e){
window.addEventListener("mousemove", onMouseDragMove,true);
window.addEventListener("mouseup", onMouseDragUp,false);
};

var onMouseDragUp = function(e){
// This code executes, but the events CONTINUE to be triggered after removing the event listener

//The following lines do not seem to have any effect whatsoever even though they are executed when the user releases the mouse button
window.removeEventListener("mousemove", onMouseDragMove, true);
window.removeEventListener("mouseup", onMouseDragUp,false);
};

var onMouseDragMove = function(e){
console.log('moving');
};

myNamespace.MyClass = function(param){
this._param = param;
this._div = document.createElement('div');
this._div = ....

this._div.addEventListener('mousedown', onMouseDragDown.bind(this), false);
}

myNameSpace.MyClass.prototype.getDiv = function (){
return this._div;
}
)(myNameSpace);

Index.html

...

        function onCreateNewDocumentClicked(event){
var myObject = new myNamepace.MyClass(someParams);
document.body.appendChild(mdi.getDiv());
}

最佳答案

要删除事件监听器,您必须提供添加时所提供的确切功能。
这里发生的是 bind() 每次都创建一个新函数,所以实际上:

someFunc.bind(someObj) !== someFunc.bind(someObj)

要删除事件监听器,您必须存储添加时提供的函数。

所以当你添加它时存储监听器以便以后能够删除它:

var someListener = someFunc.bind(someObj);
element.addEventListener("--", someListener ) ;

// then, later :
element.removeEventListener('--', someListener);

我在这里做了一个简短的演示,当你点击第一个按钮时它会提示“你好”。
我们看到,通过使用新的绑定(bind)调用移除监听器,它并没有移除它。
然后删除存储的函数就可以完成这项工作。

http://jsbin.com/EjevIQA/2/edit

编辑:您不需要为要拖动的每个 div 添加/删除监听器。相反,您可以只听窗口内的点击,并使用“目标”事件的信息,它将告诉点击了哪个 div。
也许你会想在处理时停止传播/防止默认被点击的div,我不知道。

事件处理程序看起来像:

 function handleMouseDown(e) {
// you might check here which button was clicked (0=left, 2=right)
var button = e.button;
// retrieve the target
var target = e.target ;
// check if the target is an object we want to drag
...
... return otherwise.
// do some things to initialize the drag.
...
// you might want to prevent the click to bubble / trigger default behaviour :
e.stopPropagation();
e.preventDefault();
}

您在窗口或文档对象上一劳永逸地设置它:

document.addEventListener("mousedown", handleMouseDown)

我在这里做了一个小demo,点击一个div可以看到它已经被识别了:
http://jsbin.com/ilavikI/2/edit

关于javascript - 无法删除(绑定(bind)的)事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18942402/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com