gpt4 book ai didi

javascript - 无法使用 JavaScript 删除事件监听器

转载 作者:行者123 更新时间:2023-11-28 05:50:42 24 4
gpt4 key购买 nike

请告诉我,为什么removeEvent 不起作用,并且在调用removeEventListener 后单击主体起作用。我只是为了更好地理解而使其更简单
p - 我的对象,具有属性和方法;
p.is_open - true/false 属性;
p.switcher - DOM 元素;

function MyClassname(){
.......
p.switcher.onclick = function(e){
if(p.is_open){
p.close();
document.body.removeEventListener('click', p.close.bind(p));
}else{
p.open();
document.body.addEventListener('click', p.close.bind(p));
};
e.stopPropagation();
};
.......
};
.......
MyClassname.prototype.close = function(){
var p = this;
p.is_open = false;
p.switcher.className = 'closed';
};
MyClassname.prototype.open = function(){
var p = this;
p.is_open = true;
p.switcher.className = 'open';
};

我可以用另一种方式解决这个任务,但我想解决这个问题。谢谢。

最佳答案

您无法删除事件监听器,因为您必须将 p.close.bind(p) 存储在变量中。
像这样的事情:

function MyClassname(){
var closeHandler = p.close.bind(p);
.......
p.switcher.onclick = function(e){
if(p.is_open){
p.close();
document.body.removeEventListener('click', closeHandler);
}else{
p.open();
document.body.addEventListener('click', closeHandler);
};
e.stopPropagation();
};
.......
};
.......
MyClassname.prototype.close = function(){
var p = this;
p.is_open = false;
p.switcher.className = 'closed';
};
MyClassname.prototype.open = function(){
var p = this;
p.is_open = true;
p.switcher.className = 'open';
};

p.close.bind(p)将创建一个具有相同主体的函数。
它是一个全新的对象。比较 2 个不同的对象会返回 false

部分引用 MDN 关于 the .bind() method 的内容:

The bind() method creates a new function that, when called, has its this keyword set to the provided value [...].

<小时/>

这是一个例子:

var button = document.getElementsByTagName('button')[0];

var handler = function(){
console.log('click');
//this refers to the button
this.removeEventListener('click', handler.bind(this));
};

button.addEventListener('click', handler.bind(button));
<button>Click me</button>

如您所见,点击声保持在那里。这是另一个例子:

var button = document.getElementsByTagName('button')[0];

var handler = (function(){
console.log('click');
//this refers to the button
this.removeEventListener('click', handler);
}).bind(button);

button.addEventListener('click', handler);
<button>Click me</button>

.bind() 的结果存储在变量中可以让您按照自己的意愿进行操作,并且您引用的是完全相同的对象。

关于javascript - 无法使用 JavaScript 删除事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38101940/

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