javascript - jquery .on() 事件参数在 Firefox 中不起作用

Question

请看这个小提琴：

http://jsfiddle.net/e9uwA/1/

这里应该发生的是，较小的盒子应该通过 css 过渡淡出，然后 ontransitionend，调整大盒子的高度。它在 Chrome、Opera 中运行良好，但在 Firefox 中无法运行。

我认为这与eventjQuery 的 .on() 方法的第二个参数有关。如果不允许，还有其他选择吗？

谢谢！

哦，忽略小提琴中写的评论:)

Answer 1

你的event处理方式有点错误。一些浏览器有一个名为的内置对象event，它恰好有一个stopPropagation()方法。火狐没有。jQuery 优雅地处理了这些差异，但是您没有正确使用它。

您的事件处理程序具有以下形式：

.on('eventName', event, function(){...})

他们应该是

.on('eventName', function(evt){...})

evt事件的 jQuery 包装器在哪里。

function start() {
    $('.childDiv').addClass('faded').on('transitionend', function(evt){
        evt.stopPropagation();
        //I suppose this ended the event listener for the childDiv
        $('.childDiv').off('transitionend');

        $('.parentDiv')
            .addClass('no-height')
            .on('transitionend',function(evt) {
                //why is 'opacity' being read? any way to fix this?
                alert(evt.propertyName);
            });
    });    
}

（但是，请注意jQuery.Event没有属性propertyName，因此 finalalert将显示undefined）

现场示例：http: //jsfiddle.net/qCKcg/