Poprawka prędkości: Jak usunąć opóźnienie 300ms w jQuery Mobile Apps

Jak usunąć opóźnienie kliknięcia z mobilnego Safari na iOS?Poprawka prędkości: Jak usunąć opóźnienie 300ms w jQuery Mobile Apps

Spróbowałem trochę przy użyciu detektorów zdarzeń i użyłem wielu różnych skryptów (takich jak Lightning Touch), aby nie było radości. Istnieje kilka rozwiązań, które zadziałałyby, jednak tego typu skrypty zmuszają do kodowania elementu docelowego do każdego łącza w DOM. To niestety może spowodować szybkie i pewne powolne przejścia, które nie będą dla mnie działać.

Źródło

2012-11-20 MikeZ

I wreszcie znaleźć odpowiedź na moje nieszczęścia prędkości po wyszukaniu niestrudzonej i przychodzi w formie FastClick (this thread idzie do bardzo szczegółowo, wraz z kilkoma ulepszeniami w komentarzach innych użytkowników).

Dołączenie skryptu FastClick.js, dodanie obiektu nasłuchującego onLoad i zawijanie zawartości <body> w zakresie, a aplikacja powinna zacząć działać znacznie lepiej.

onLoad Listener:<body onLoad="initFastButtons();">

Span Wrap:

<body onLoad="initFastButtons();"> 
    <span id="fastclick"> 

    [...] 

    </span> 
</body>

FastClick.js

//======================================================== FASTCLICK 
     function FastButton(element, handler) { 
      this.element = element; 
      this.handler = handler; 
      element.addEventListener('touchstart', this, false); 
     }; 
     FastButton.prototype.handleEvent = function(event) { 
      switch (event.type) { 
       case 'touchstart': this.onTouchStart(event); break; 
       case 'touchmove': this.onTouchMove(event); break; 
       case 'touchend': this.onClick(event); break; 
       case 'click': this.onClick(event); break; 
      } 
     }; 
     FastButton.prototype.onTouchStart = function(event) { 

event.stopPropagation(); 
      this.element.addEventListener('touchend', this, false); 
      document.body.addEventListener('touchmove', this, false); 
      this.startX = event.touches[0].clientX; 
      this.startY = event.touches[0].clientY; 
isMoving = false; 
     }; 
     FastButton.prototype.onTouchMove = function(event) { 
      if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) { 
       this.reset(); 
      } 
     }; 
     FastButton.prototype.onClick = function(event) { 
      this.reset(); 
      this.handler(event); 
      if(event.type == 'touchend') { 
       preventGhostClick(this.startX, this.startY); 
      } 
     }; 
     FastButton.prototype.reset = function() { 
      this.element.removeEventListener('touchend', this, false); 
      document.body.removeEventListener('touchmove', this, false); 
     }; 
     function preventGhostClick(x, y) { 
      coordinates.push(x, y); 
      window.setTimeout(gpop, 2500); 
     }; 
     function gpop() { 
      coordinates.splice(0, 2); 
     }; 
     function gonClick(event) { 
      for(var i = 0; i < coordinates.length; i += 2) { 
       var x = coordinates[i]; 
       var y = coordinates[i + 1]; 
       if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) { 
        event.stopPropagation(); 
        event.preventDefault(); 
       } 
      } 
     }; 
     document.addEventListener('click', gonClick, true); 
     var coordinates = []; 
     function initFastButtons() { 
new FastButton(document.getElementById("fastclick"), goSomewhere); 
     }; 
     function goSomewhere() { 
var theTarget = document.elementFromPoint(this.startX, this.startY); 
if(theTarget.nodeType == 3) theTarget = theTarget.parentNode; 

var theEvent = document.createEvent('MouseEvents'); 
theEvent.initEvent('click', true, true); 
theTarget.dispatchEvent(theEvent); 
     }; 
//========================================================

Źródło

2012-11-20 16:12:45 MikeZ

Czy ktoś napotkał non JS-intensywne rozwiązanie? Być może za pomocą wskaźników css-events: none; ? – JackMahoney

fastclick ** całkowicie ** kończy się niepowodzeniem z przeciąganiem jquery – 8DK

To działa dla mnie. Ilekroć nowa strona zostanie dodana do DOM, możemy dołączyć szybki kliknij, aby wszystkie linki ...

// when new pages are loaded into the DOM via JQM AJAX Nav, apply ko bindings to that page's DOM 
$(document).on('pageinit', '.ui-page', function (event, data) 
{ 
    var activePage = $(event.target).get(0); 
    FastClick.attach(activePage); 
});

Źródło

2013-05-30 16:28:31 TWilly

Ben Howdle niedawno stworzyła projekt open source Touche.js która rozwiązuje ten problem w dość prosty i elegancki sposób. Może warto szukać kogoś, kto szuka rozwiązania tego problemu.

Źródło

2013-10-24 14:49:43 Robbie

Nie jestem w stanie bezpośrednio opublikować komentarza do zalecenia MikeZ.

Użyłem tego z powodzeniem, ale musiałem zrobić kilka dodatkowych tweek, zwłaszcza na urządzenia z Androidem.

Zamiast wywoływać event.preventDefault(); w gonClick(), miałem też zadzwonić event.stopImmediatePropagation();

przeciwnym razie można uruchomić w kłopoty, zwłaszcza, gdy elementy dynamiczne, takie jak panele, są otwarte na górze elementu kliknąłeś.

metoda pełna gonClick() należy stosować rozwiązania mikez:

function gonClick(event) { 
    for (var i = 0; i < coordinates.length; i += 2) { 
     var x = coordinates[i]; 
     var y = coordinates[i + 1]; 
     if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) { 
      event.stopPropagation(); 
      event.preventDefault(); 
      event.stopImmediatePropagation(); 
     } 
    } 
};

Źródło

2013-12-25 16:05:46 Benjamin

Poprawka prędkości: Jak usunąć opóźnienie 300ms w jQuery Mobile Apps

Odpowiedz

Powiązane problemy