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

Question

请看这个 fiddle :

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

这里应该发生的是较小的盒子应该通过 css 过渡淡出，然后在过渡结束时，调整较大盒子的高度。它在 Chrome、Opera 中运行良好，但在 Firefox 中不起作用。

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

谢谢!

哦，请忽略 fiddle 中写的评论:)

Answer 1

您的事件 处理方式有点不对。一些浏览器有一个名为 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，因此最终 alert 将显示 undefined)

实例:http://jsfiddle.net/qCKcg/