这让我疯了。我正在注册多个mouseout事件,即使我正在使用removeEventListener()删除它们。我尝试了各种各样的变化。基本上,一旦mouseout事件发生,我想摆脱它,因为用户将翻阅不同的图像以查看大预览。它工作正常,但注册的多个事件让我感到震惊。
this.removeEventListener('mouseout', handler, false);
什么也没有。我不确定我在这里做什么。我似乎无法摆脱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
答案 0 :(得分:6)
addEventListener
未返回值,因此handler
为undefined
,对removeEventListener
的调用将失败。
使用命名的函数表达式代替:
// 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
只能在函数本身内访问函数的名称。