webkitTransitionEnd eventListener触发两次

我想写一些具有webkitTransitionEnd eventListener的回调函数，但由于某种原因eventListener被激发两次（doSomething被执行两次）。webkitTransitionEnd eventListener触发两次

Something.prototype.functionOne = function() { 
    this.lightbox = document.createElement('div'); 
    if (this.transitions) 
     this.element.addEventListener('webkitTransitionEnd', this, false); 

    window.setTimeout(function() { 
     this.element.className = 'visible'; 
    }.bind(this), 0); 
} 

Something.prototype.handleEvent = function(event) { 
    event.stopPropagation(); 
    this.doSomething(); 
}

这不适用于Safari 5.1而不调用doSomething两次。我不想在第一次运行时删除eventListener，我只是希望它在类更改时执行一次。

直播http://mynameisraj.com/code/cssbox

来源

2011-06-13 raj

做了一些调查后，在我看来，handleEvent被调用一次每两个独立WebKitTransitionEvent事件，这在propertyName不同的 - 第一个事件有"opacity"的propertyName;另一个有"-webkit-transform"。

我认为handleEvent总是为每个完成动画的CSS属性调用一次，然后为整个转换块调用"-webkit-transform"。

要解决你的榜样，我相信这将工作：

Something.prototype.handleEvent = function(event) { 
    event.stopPropagation(); 

    if (event.propertyName === "-webkit-transform") { 
     this.doSomething(); 
    } 
}

来源

2011-06-13 08:30:06

这解决了这个问题。我应该知道它会在每次转换时触发一次！ – raj 2011-06-13 15:17:33

感谢您的解答，只是整理了一直存在的问题！另外，对于任何使用jQuery的人，你都可以通过使用event.originalEvent.propertyName来实现。 – will 2012-02-28 13:59:52

我有同样的问题，但在我的情况下，它是同一个道具发射两次!!？ – albanx 2012-09-30 11:09:29

webkitTransitionEnd eventListener触发两次

回答

相关问题