速度修正：如何刪除jQuery移動應用程序中的300毫秒延遲

如何從iOS移動Safari中刪除點擊/點擊延遲？速度修正：如何刪除jQuery移動應用程序中的300毫秒延遲

我已經用事件監聽器弄了一會兒，並且使用了一堆不同的腳本（比如Lightning Touch）而沒有喜樂。有幾個解決方案可以工作，但是這些類型的腳本會強制您將目標元素編碼到DOM上的每個鏈接。這不幸的是可能會導致一些快速和一些緩慢的過渡，這對我不起作用。

來源

2012-11-20 MikeZ

我終於找到了答案，經過不懈搜索我的速度疾苦，它有FastClick的形式（this thread進入非常詳細，與來自其他用戶的評論一些調整一起）。

合併FastClick.js腳本，添加onLoad偵聽器，並在一個範圍內包裝<body>內容，並且您的應用應該開始感覺更加本地化。

的onLoad監聽器：<body onLoad="initFastButtons();">

跨度餘音：

<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); 
     }; 
//========================================================

來源

2012-11-20 16:12:45 MikeZ

有沒有人遇到非JS密集的解決方案？也許使用CSS指針事件：無; ？ – JackMahoney

fastclick **完全**失敗，jquery可拖動 – 8DK

這是爲我工作。每當一個新的頁面被添加到DOM，我們可以快速點擊然後附加到所有的鏈接...

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

來源

2013-05-30 16:28:31 TWilly

Ben Howdle最近創建了一個開源項目Touche.js這在一個相當簡單而優雅的方式來解決這個問題。可能值得一看尋找解決這個問題的人。

來源

2013-10-24 14:49:43 Robbie

我無法直接發表評論到MikeZ的建議。

我用它成功了，但不得不做一些額外的tweek，特別是對於Android設備。

而是在gonClick調用event.preventDefault();的（），我也只好打電話event.stopImmediatePropagation();

否則，你可能會遇到麻煩運行尤其是，如果動態元素，如面板，是在元素的頂部打開你點擊。

完全gonClick（）方法與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(); 
     } 
    } 
};

來源

2013-12-25 16:05:46 Benjamin

速度修正：如何刪除jQuery移動應用程序中的300毫秒延遲

回答

相關問題