《H5 App開發》移動端IOS click 事件響應緩慢的解決方案

形成點擊緩慢的緣由

從點擊屏幕上的元素到觸發元素的 click 事件，移動瀏覽器會有大約 300 毫秒的等待時間。爲何這麼設計呢？ 由於它想看看你是否是要進行雙擊（double tap）操做。

 

第一種解決方案：

使用js框架fastclick, 處理移動端 click 事件 300 毫秒延遲， 由 FT Labs 開發，Github 項目地址：https://github.com/ftlabs/fastclick

在頁面直接引入fastclick.js

<script type='application/javascript' src='/path/to/fastclick.js'></script>

 原生js使用方法：

window.addEventListener('load', function() {
  FastClick.attach(document.body);
}, false);

環境內有jquery的狀況下，使用方法：

$(function() {
  FastClick.attach(document.body);
});

 

第二種解決方案：

第二種解決方案是將click事件替換爲touchstart事件

$(document).on("touchstart",".farmGoods",function(){
     alert('111');
 });

 

這兩個解決方案的差別：

1.第一種方案在ios上面仍是會存在有點延遲的問題，可是能解決連續點擊沒反應的問題，上下滑動滾動條不會選中事件

2.第二種方案在ios上面不會存在延遲的問題，可是上下滑動滾動條會選中手指接觸的第一個元素

 

ps:這裏博主只是在ios App上面測試的這個問題，並未發現安卓系統會存在延遲、連選不中的問題；

推薦使用第一種解決方案