《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上面測試的這個問題，並未發現安卓系統會存在延遲、連選不中的問題；

推薦使用第一種解決方案