tap事件触发后taphold jQuery Mobile 1.1.1 [英] tap event fired after taphold jQuery Mobile 1.1.1

问题描述

我正在使用与jQuery Mobile 1.1.1捆绑在一起的Phonegap开发一个iOS应用。我在我的页面上有一个div，正在侦听tap和taphold事件。

I am developing an app for iOS using Phonegap bundled with jQuery Mobile 1.1.1. I have a div on my page that is listening for both tap and taphold events.

我面对的问题是，轻敲事件在taphold事件发生后，一旦我抬起手指。如何防止这种情况？
提供解决方案此处，但这是唯一的方法做到这一点？ Kinda取消了有两个不同事件的点， taphold如果你需要使用布尔标志来区分两者。

The problem I am facing is that the tap event is fired after the taphold event once I lift my finger. How do I prevent this? A solution is provided here but is this the only way to do this? Kinda nullifies the whole point of having two different events for tap & taphold if you need to use a boolean flag to differentiate the two.

以下是我的代码：

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

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

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

Would greatly appreciate the help. Thanks!

推荐答案

我检查了jQuery Mobile的实现。

[Tried and Tested] I checked jQuery Mobile's implementation. They are firing the 'tap' event after 'taphold' every time on 'vmouseup'.

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

Workaround would be not to fire the 'tap' event if the 'taphold' has been fired. Create a custom event or modify the source as per you need as follows:

$.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 );
        });
    }
};

这篇关于tap事件触发后taphold jQuery Mobile 1.1.1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！