Question

一旦“转换”结束，我正在使用“ transitionend”运行其他代码。

我一直没有尝试嵌套事件侦听器，因此在初始转换完成后，我可以观察进一步的转换。

从下面的代码中可以看到，我一直在进行测试，试图先停止冒泡并删除以前的事件侦听器，但没有成功。

以下，第一个偶数侦听器工作，然后第二个侦听器不运行。

任何关于我做错事情的指导，将不胜感激。

$('.image-viewer').addClass('animate animate-out').on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){

    e.stopPropagation();

    if ( e.originalEvent.propertyName === 'opacity' ) {

        $('.image-viewer').removeClass('animate animate-out').off("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");

        $('.image-viewer').addClass('transition').on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){

            e.stopPropagation();

            if ( e.originalEvent.propertyName === 'opacity' ) {

                $('.image-viewer').off("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");

            }
        });

    }

});

Answer 1

由于您嵌套了同一事件，因此您可以设置一个全局侦听器：

$(document).on( "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", '.image-viewer, function(){
            if ( e.originalEvent.propertyName === 'opacity' ) {

                $('.image-viewer').off();

            }
} );

是否可以在jQuery中嵌套事件侦听器

1 个答案: