[英]Registering multiple event listeners even though I'm using removeEventListener
This is driving me nuts. 这让我发疯。 I'm getting multiple mouseout events registering even though I'm getting rid of them with removeEventListener().
我正在注册多个mouseout事件,即使使用removeEventListener()摆脱了它们也是如此。 I've tried all kinds of variations of this.
我已经尝试过各种变化。 Essentially, once the mouseout event happens, I want to get rid of it because the user will be rolling over different images to see a large preview.
本质上,一旦发生mouseout事件,我想摆脱它,因为用户将在不同的图像上滚动以查看较大的预览。 It works fine, but the multiple events registered are ticking me off.
它工作正常,但是注册的多个事件使我不寒而栗。
this.removeEventListener('mouseout', handler, false);
and nothing. 没事了。 I'm not sure what I'm doing here.
我不确定在这里做什么。 I can't seem to get rid of the mouseout events and they just keep on piling.
我似乎无法摆脱mouseout事件,它们只是不断堆积。
document.querySelector('.grid').addEventListener('mouseover',function(e) {
if (e.target.tagName==='IMG') {
var myElement=document.createElement('div');
myElement.className='preview';
e.target.parentNode.appendChild(myElement);
var handler = e.target.addEventListener('mouseout', function (d) {
var myNode = d.target.parentNode.querySelector('div.preview');
console.log(d.target.parentNode);
if (myNode) {
myNode.parentNode.removeChild(myNode);
}
this.removeEventListener('mouseout', handler, false);
});
} //
}, false); // addEventListener
addEventListener
does not return a value, so handler
is undefined
and the call to removeEventListener
will fail. addEventListener
不会返回值,因此undefined
handler
,并且对removeEventListener
的调用将失败。
Use a named function expression instead: 请使用命名函数表达式:
// give the function a name vvvvvvv
e.target.addEventListener('mouseout', function handler(d) {
// ...
this.removeEventListener('mouseout', handler, false); // use name
}, false); // <- don't forget `false` here, just in case
The name of the function is only accessible inside the function itself. 函数名称只能在函数本身内部访问。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.