taphold joker Mobile 1.1.1

Question

後點擊事件我正在開發iOS應用程序，使用與jQuery Mobile 1.1.1綁定的Phonegap。我的網頁上有一個div，用於監聽tap和taphold事件。

我面臨的問題是，一旦我擡起手指，觸發事件就會在taphold事件後被觸發。我如何防止這種情況？ 提供了一個解決方案here但這是唯一的方法來做到這一點？如果您需要使用布爾標誌來區分這兩種情況，那麼可以使抽頭& taphold具有兩個不同事件的整個點。

以下是我的代碼：

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

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

將不勝感激幫助。謝謝！

Answer 1

[久經考驗] 我檢查了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 2

你可以使用jquery的stopImmediatePropagation（）方法來解決這個問題。根據jquery api，stopImmediatePropagation（）的解釋方法

「被執行保持的處理程序的其餘部分，並防止 事件向上冒泡的DOM樹。」

Answer 3

把這個在您的taphold事件處理程序......這個建議假定o是一個jQuery對象，打響了taphold

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

綁定到一個方法只會觸發一次事件。如果它是一個< a>標籤，則返回false將停止執行該事件。

Answer 4

只需將此設置爲您的文檔的頂部或定義之前的任何地方你甚至：

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

然後你可以使用它像這樣：

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

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

$ .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：謝謝你的解答。 這很棒，聽起來很適合我！

Answer 7

我仍然遇到問題，用jquery-mobile的taphold，我解決了taphold之後調用的問題，在元素上放了一個超時。 JQM 1.4 with emitTapOnTaphold = false;

例子：

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

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