Question

请看这个小提琴：

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

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

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

谢谢！

哦，无视小提琴中的评论：）

Answer 1

你的event处理方式有点错误。有些浏览器有一个名为event的内置对象，恰好有stopPropagation()方法。 Firefox没有。 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/

jquery .on（）事件参数在Firefox中不起作用

1 个答案: