Question

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

我面临的问题是，一旦我抬起手指，敲击事件就会触发敲击事件。我该如何防止这种情况？提供了一个解决方案here，但这是唯一的方法吗？有点消除了为tap＆amp; amp;有两个不同事件的重点。如果您需要使用布尔标志来区分这两者，请使用taphold。

以下是我的代码：

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

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

非常感谢帮助。谢谢！

Answer 1

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

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

然后你可以像这样使用它：

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

Answer 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 ); }); } };

Answer 3

您可以使用jquery的stopImmediatePropagation（）方法来解决此问题。根据{{3}}中的解释，stopImmediatePropagation（）方法

“让其余的处理程序不被执行并阻止冒泡DOM树的事件。“

Answer 4

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

jQuery（o）.one（'tap click'，function（）{return false;}）;

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

Answer 5

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

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

为了支持点击，我会推迟等待，直到点击事件也会一直触发。

Answer 6

我仍有问题，使用jquery-mobile的taphold，我解决了taphold之后调用的点击问题，对元素进行了超时。 JQM 1.4 with emitTapOnTaphold = false;

示例：

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

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

Answer 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：感谢您的解决方案。这很棒，听起来对我有用！

taphold jQuery Mobile 1.1.1后点击事件

7 个答案: