Stuknij w zdarzenie uruchamiane po taflinie jQuery Mobile 1.1.1

Question

Pracuję nad aplikacją na iOS przy użyciu Phonegapa w pakiecie z jQuery Mobile 1.1.1. Na mojej stronie znajduje się div, który nasłuchuje zdarzeń związanych z tapem i taphold.

Problem, przed którym stoję, polega na tym, że wydarzenie z kranem jest uruchamiane po zdarzeniu typu "taphold", gdy podniosę palec. Jak mogę temu zapobiec? Rozwiązanie jest dostarczane here, ale czy jest to jedyny sposób, aby to zrobić? Kinda unieważnia cały punkt związany z dwoma różnymi zdarzeniami na tapecie &, jeśli musisz użyć flagi binarnej, aby odróżnić te dwa.

Po to mój kod:

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

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

znacznym stopniu docenić pomoc. Dzięki!

Answer 1

[sprawdzony] Sprawdziłem wdrożenie jQuery Mobile. Za każdym razem na "vmouseup" wystrzeliwują zdarzenie "tap" po "taflu".

Obejście problemu polegałoby na tym, że nie będzie strzelał do zdarzenia "dotknięcia", jeśli "tafta" została zwolniona. Tworzenie niestandardowego zdarzenia lub zmiany źródła zgodnie trzeba następująco:

$.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

Do rozwiązania tego problemu można użyć metody jQuery stopImmediatePropagation(). Zgodnie z wyjaśnieniem w jquery api, stopImmediatePropagation() metoda

„Keeps resztę ładowarki przed egzekucją i zapobiega zdarzenie z pęcherzyków w górę drzewa DOM.”

Answer 3

umieścić to w Twojej obsługi zdarzeń taphold ... to propozycja zakłada, o to, że obiekt jQuery oddał taphold

jQuery (o) .one ("kliknięcie stuknij", function() {return false;});

Wiązanie z jedną metodą spowoduje wyzwolenie zdarzenia tylko jeden raz. return false spowoduje zatrzymanie wykonywania tego zdarzenia, jeśli był to znacznik < a>.

Answer 4

Wystarczy ustawić to na górze dokumentu albo nigdzie wcześniej określić swoje nawet:

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

Następnie można go używać tak:

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

Answer 5

Od machnięcia, wyzwala taphold potem udało mi się to uprościć dzięki:

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

W celu wsparcia również należy odłożyć czekanie do momentu aż dotknij wydarzenia, które również zawsze będzie strzelać.

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: Dzięki za twoje rozwiązania. To świetnie, brzmi jak to działa dla mnie!

Answer 7

Nadal mam problemy, z tapholdem jquery-mobile, rozwiązałem problem kliknięcia wywołanego po taflonie, kładąc limit czasu na elemencie. JQM 1.4 z emisTapOnTaphold = false;

Przykład:

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

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