Czy istnieje sposób na usunięcie opóźnienia kliknięcia na urządzeniach mobilnych?

Question

Podczas przeglądania strony internetowej na urządzeniu mobilnym (iPad, karta Galaxy) zawsze występuje opóźnienie po kliknięciu elementu (zwykły link lub cokolwiek innego, co można klikać za pomocą javascript/jquery).

Podczas czytania w Internecie dowiedziałem się, że przeglądarka używa touchstartu, po którym następują zdarzenia touchend, a następnie uruchamia zwykłe kliknięcie. Czy istnieje sposób na bardziej elastyczne kliknięcie i usunięcie opóźnionego zdarzenia kliknięcia? Może używając javascript lub czegoś innego?

Answer 1

Jeśli sam piszesz stronę internetową, możesz zarejestrować słuchacza na touchstart i touchend i wywołać kod onclick bezpośrednio z ekranu dotykowego bez żadnych opóźnień.

Jeśli don`t obsłużyć zdarzenia w kontakcie przesunąć przeglądarka wyśle ​​(z pewnym opóźnieniem) zdarzenie click do elementu

Spójrz na tego opisu z Google do tworzenia przycisków „fast”: http://code.google.com/intl/de-DE/mobile/articles/fast_buttons.html

Answer 2

Dostosowany z biblioteki Matta (https://stackoverflow.com/a/9370637/1491212) sam zaadaptowany z kodu google, napisałem wtyczkę jQuery.

Zastosowanie tak: $('mySelector').fastClick(handler);

(function($){ 
    var clickbuster = { 
     preventGhostClick: function(x, y) { 
      clickbuster.coordinates.push(x, y); 
      window.setTimeout(clickbuster.pop, 2500); 
     }, 
     pop: function() { 
      clickbuster.coordinates.splice(0, 2); 
     }, 
     onClick: function(event) { 
      for (var i = 0; i < clickbuster.coordinates.length; i += 2) { 
      var x = clickbuster.coordinates[i]; 
      var y = clickbuster.coordinates[i + 1]; 
      if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) { 
       event.stopPropagation(); 
       event.preventDefault(); 
      } 
      } 
     } 
    }; 


    var methods = { 
     init: function(handler){ 
      return this.each(function() { 
       var $this = $(this), 
        data = $this.data('fastClick'); 
       if(!data){ 
        this.addEventListener('touchstart', methods.handleEvent, false); 
        this.addEventListener('click', methods.handleEvent, false); 
        $this.data('fastClick', { 
         target: $this, 
         handler: handler 
        }); 
       } 
      }); 
     }, 
     handleEvent:function(event) { 
      switch (event.type) { 
      case 'touchstart': $(this).fastClick('onTouchStart',event); break; 
      case 'touchmove': $(this).fastClick('onTouchMove',event); break; 
      case 'touchend': $(this).fastClick('onClick',event); break; 
      case 'click': $(this).fastClick('onClick',event); break; 
      } 
     }, 
     onTouchStart: function(event) { 
      event.stopPropagation(); 
      this[0].addEventListener('touchend', methods.handleEvent, false); 
      var _this = this; 
      document.body.addEventListener('touchmove', function(event){ 
      methods.handleEvent.apply(_this,[event]); 
      }, false); 

      $(this).data('fastClick').startX = event.touches[0].clientX; 
      $(this).data('fastClick').startY = event.touches[0].clientY; 
     }, 
     onTouchMove: function(event) { 
      if (Math.abs(event.touches[0].clientX - this.data('fastClick').startX) > 10 || 
       Math.abs(event.touches[0].clientY - this.data('fastClick').startY) > 10) { 
       this.fastClick('reset'); 
      } 
     }, 
     onClick: function(event) { 
      event.stopPropagation(); 
      $(this).fastClick('reset'); 
      $(this).data('fastClick').handler.call(this,event); 

      if (event.type == 'touchend') { 
      clickbuster.preventGhostClick($(this).data('fastClick').startX, $(this).data('fastClick').startY); 
      } 
     }, 
     reset: function() { 
      this[0].removeEventListener('touchend', methods.handleEvent, false); 
      document.body.removeEventListener('touchmove', methods.handleEvent, false); 
     } 
    } 
    $.fn.fastClick = function(method) { 
     if (methods[method]) { 
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || typeof method === 'function' || !method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.hScroll'); 
     } 

    } 

    clickbuster.coordinates = []; 
    document.addEventListener('click', clickbuster.onClick, true); 

})(jQuery); 

Answer 3

używam wykrywanie jeśli dotykowy Obsługa urządzeń jak modernizatora. Wypełnij var o nazwie touchClick z opcjami 'click' lub 'touchend' w oparciu o wynik, jeśli jest to urządzenie dotykowe, czy nie. W jquery po prostu zadzwonię:

$('element').on(touchClick, function(e){ //do something }); 

Ma bardzo mały ślad.