在点击 jQuery Mobile 1.1.1 后触发点击事件答案

【问题标题】：tap event fired after taphold jQuery Mobile 1.1.1在点击 jQuery Mobile 1.1.1 后触发点击事件
【发布时间】：2012-08-01 12:18:34
【问题描述】：

我正在使用与 jQuery Mobile 1.1.1 捆绑的 Phonegap 为 iOS 开发一个应用程序。我的页面上有一个 div 正在监听点击和点击事件。

我面临的问题是，一旦我抬起手指，就会在点击事件之后触发点击事件。我该如何防止这种情况？ here 提供了一个解决方案，但这是唯一的方法吗？如果您需要使用布尔标志来区分两者，则有点取消了为 tap 和 taphold 设置两个不同事件的全部意义。

以下是我的代码：

$('#pageOne').live('pageshow', function(event) {
    $('#divOne').bind('taphold', function (event) {
       console.log("TAP HOLD!!");    
    });

    $('#divOne').bind('tap', function () {
      console.log("TAPPED!!");
    });
});

非常感谢您的帮助。谢谢！

【问题讨论】：

标签： events jquery-mobile cordova

【解决方案1】：

在您定义偶数之前，只需将其设置在文档顶部或任何位置：

$.event.special.tap.emitTapOnTaphold = false;

那么你可以这样使用它：

$('#button').on('tap',function(){
    console.log('tap!');
}).on('taphold',function(){
    console.log('taphold!');
});

【讨论】：

【解决方案2】：

[久经考验] 我检查了 jQuery Mobile 的实现。他们每次在“vmouseup”上“taphold”后都会触发“tap”事件。

解决方法是如果 'taphold' 已触发，则不触发 'tap' 事件。创建自定义事件或根据需要修改源，如下所示：

$.event.special.tap = {
    tapholdThreshold: 750,

    setup: function() {
        var thisObject = this,
            $this = $( thisObject );

        $this.bind( "vmousedown", function( event ) {

            if ( event.which && event.which !== 1 ) {
                return false;
            }

            var origTarget = event.target,
                origEvent = event.originalEvent,
                /****************Modified Here**************************/
                tapfired = false,
                timer;

            function clearTapTimer() {
                clearTimeout( timer );
            }

            function clearTapHandlers() {
                clearTapTimer();

                $this.unbind( "vclick", clickHandler )
                    .unbind( "vmouseup", clearTapTimer );
                $( document ).unbind( "vmousecancel", clearTapHandlers );
            }

            function clickHandler( event ) {
                clearTapHandlers();

                // ONLY trigger a 'tap' event if the start target is
                // the same as the stop target.
                /****************Modified Here**************************/
                //if ( origTarget === event.target) {
                 if ( origTarget === event.target && !tapfired) {
                     triggerCustomEvent( thisObject, "tap", event );
                 }
            }

            $this.bind( "vmouseup", clearTapTimer )
                .bind( "vclick", clickHandler );
            $( document ).bind( "vmousecancel", clearTapHandlers );

            timer = setTimeout( function() {
                tapfired = true;/****************Modified Here**************************/
                triggerCustomEvent( thisObject, "taphold", $.Event( "taphold", { target: origTarget } ) );
            }, $.event.special.tap.tapholdThreshold );
        });
    }
};

【讨论】：

@JeremieWeldin 上面指出了 jquery.mobile.js 文件本身的修改。
我终于明白了。我应该这样回复评论。谢谢！

【解决方案3】：

你可以使用 jquery 的 stopImmediatePropagation() 方法来解决这个问题。根据jquery api中的解释，stopImmediatePropagation()方法

"保持其余的处理程序不被执行并防止 DOM 树冒泡的事件。”

【讨论】：

感谢您的建议，但没有解决问题。
这不适用于“实时”处理程序。同一份文件也提到了！

【解决方案4】：

把它放在你的 taphold 事件处理程序中...这个建议假设 o 是一个触发 taphold 的 jQuery 对象

jQuery(o).one('点击点击', function(){ return false; });

绑定到一个方法只会触发一次事件。如果它是标签，则返回 false 将停止该事件的执行。

【讨论】：

【解决方案5】：

由于滑动，触发了点击，然后我能够保持简单：

    $(c).bind("taphold",function(e){
        if(e.target.wait){
            e.target.wait = false;
        }else{
            alert("fire the taphold");
        }//eo if not waiting
    });
    $(c).bind("swipe",function(e){
            e.target.wait = true;//taphold will come next if I don't wave it off
        alert(e.target.text+"("+e.target.attributes.dataId.value+") got swiped");
        return false;
    });

为了也支持点击，我会推迟等待清除，直到点击事件也将始终触发。

【讨论】：

【解决方案6】：

我还是有问题，使用 jquery-mobile 的 taphold，我解决了 taphold 之后调用的点击问题，在元素上设置了超时。 JQM 1.4 与 emitTapOnTaphold = false;

例子：

$(".element").on("taphold", function () {
        // function her

         setTimeout (function () {
             $(this).blur();
         400);
});

【讨论】：

【解决方案7】：

$.event.special.tap = { tapholdThreshold: 750,

setup: function() {
    var thisObject = this,
        $this = $( thisObject );

    $this.bind( "vmousedown", function( event ) {

        if ( event.which && event.which !== 1 ) {
            return false;
        }

        var origTarget = event.target,
            origEvent = event.originalEvent,
            /****************Modified Here**************************/
            tapfired = false,
            timer;

        function clearTapTimer() {
            clearTimeout( timer );
        }

        function clearTapHandlers() {
            clearTapTimer();

            $this.unbind( "vclick", clickHandler )
                .unbind( "vmouseup", clearTapTimer );
            $( document ).unbind( "vmousecancel", clearTapHandlers );
        }

        function clickHandler( event ) {
            clearTapHandlers();

            // ONLY trigger a 'tap' event if the start target is
            // the same as the stop target.
            /****************Modified Here**************************/
            //if ( origTarget === event.target) {
             if ( origTarget === event.target && !tapfired) {
                 triggerCustomEvent( thisObject, "tap", event );
             }
        }

        $this.bind( "vmouseup", clearTapTimer )
            .bind( "vclick", clickHandler );
        $( document ).bind( "vmousecancel", clearTapHandlers );

        timer = setTimeout( function() {
            tapfired = true;/****************Modified Here**************************/
            triggerCustomEvent( thisObject, "taphold", $.Event( "taphold", { target: origTarget } ) );
        }, $.event.special.tap.tapholdThreshold );
    });
}

};

@Akash Budhia：感谢您的解决方案。太好了，听起来对我有用！

【讨论】：