2

这让我发疯了。即使我用 removeEventListener() 摆脱了它们，我也会注册多个 mouseout 事件。我已经尝试过各种变体。本质上，一旦 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
4

1 回答 1

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

函数的名称只能在函数本身内部访问。

于 2013-08-04T21:01:04.030 回答