javascript - 当我使用 chrome 移动版时，div on.click 事件不起作用

Question

我在 jquery 中有以下 div 元素:

this.$flipPages.find( '.box' ).on( 'click.flips', function( event ) {

    var $box            = $(this),
    $boxClose       = $( '<span class="box-close">close</span>' ),
    transitionProp  = {
        speed           : 450,
        timingfunction  : 'linear'
    },
    $overlay        = $( '<div class="overlay">close</div>' ).css( {
                        'z-index'               : 9998,
                        '-webkit-transition'    : 'opacity ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction,
                        '-moz-transition'       : 'opacity ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction
                    } ).prependTo( $( 'body' ) ),
    prop            = {
        width   : $box.outerWidth(true),
        height  : $box.outerHeight(true),
        left    : $box.offset().left,
        top     : $box.offset().top
    },
    $placeholder    = $box.clone().css( {
        'position'          : 'absolute',
        'width'             : prop.width,
        'height'            : prop.height,
        'left'              : prop.left,
        'top'               : prop.top,
        'zIndex'            : 9999,
        'overflow-y'        : 'auto',
        '-webkit-transition': 'all ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction,
        '-moz-transition': 'all ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction
    } )
    .insertAfter( $overlay )
    .end()
    .append( $boxClose.on( 'click.flips', function( event ) {

        $overlay.css( 'opacity', 0 );

        $placeholder.children().hide().end().removeClass( 'box-expanded' ).css( {
            width           : _self.windowProp.width,
            height          : _self.windowProp.height,
            'overflow-y'    : 'hidden'
        } );

        setTimeout( function() {
            $placeholder.css( {
                left    : prop.left,
                top     : prop.top,
                width   : prop.width,
                height  : prop.height,
                '-webkit-transition'    : 'all ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction,
                '-moz-transition'   : 'all ' + transitionProp.speed + 'ms ' + transitionProp.timingfunction
            });
        }, 0 );

        }) ).children().hide().end()
            .on( 'webkitTransitionEnd.flips transitionend.flips OTransitionEnd.flips', function( event ) {

            if( $( event.target ).hasClass( 'box-expanded' ) ) { // expanding

                $(this).css( {
                    width   : '100%',
                    height  : '100%',
                    '-webkit-transition' : 'none',
                    '-moz-transition' : 'none'
                } ).children().fadeIn();

            }
            else { // collapsing

                $overlay.remove();
                $(this).remove();

            }

    });

    setTimeout( function() {

        $overlay.css( {
            opacity : 1
        } );

        $placeholder.addClass( 'box-expanded' ).css( {
            left    : 0,
            top     : 0,
            width   : _self.windowProp.width,
            height  : _self.windowProp.height
        });

    }, 0 );

} );

这个 .box 是一个有内容的 div，它是可点击的，虽然它适用于台式机和笔记本电脑版本的 chrome，但不适用于移动 chrome 版本。它适用于 safari android 版本。我使用 Kinetic，我听说在使用它时我必须做一些调整才能使其在 chrome for mobile 上运行。

这在 chrome 移动设备上不起作用有什么原因吗？

编辑:

我在这个函数中添加了一个警报，当我使用 chrome for desktop 时，它会打印出来，如果我使用 chrome mobile，它永远不会发出任何警报。它没有被调用。

Answer 1

你要搜索的是手机点击事件和桌面点击事件
这可能会起作用:

this.$flipPages.find( '.box' ).on( 'touchend click.flips', function( event ) {
   ...
});