在項目中全域添加FastClick導致圖片上傳外掛程式在ios端失效的解決方案

標籤：移動   源碼   點擊   產品   img   功能   上傳圖片   瞭解   位置   

---恢複內容開始---

項目是移動端的項目，為瞭解決300ms的click延遲，所以在全域中加入了FastClick，引入的方式很簡單，網上一大堆教程，這裡不做贅述

我們就談，我遇到的問題：

某天產品要我新增一個上傳圖片的功能，這個也不是一個很困難的需求，直接使用外掛程式，這裡我使用的是element-ui的upload外掛程式（對於要快速的上線的東西，不必重複造輪子）

很快速也很簡單的完成了需求，然後測試的時候就jj了；經測試，在安卓端是沒有任何問題的，可是在ios上，始終無法開啟相簿和拍照，第一反應是，因為element是一個pc端的ui庫，難道是因為ui庫做了什麼騷操作？？？

這不科學，後來在一直點擊毫無反應的ios端上傳圖片的按鈕時，偶然間開啟了一次相簿，於是乎好像知道了點什麼。。。難道是因為外掛程式添加了位置的遮罩，導致點擊不到input才無法觸發響應的事件，審查dom元素，發現並沒有呀？

一般我們在美化input[type="file"]時，都會使用display:none來隱藏原有醜醜的樣式，在input上面蓋上一層遮罩來美化原有樣式，那麼在我們不做任何處理的時候，移動端會有天然的點透問題，就是那種透過，那你肯定懂得，然後我就想到了

我在項目中添加了FastClick，於是乎恍然大悟，找到了原因，那就好辦了，如果不能捨棄FastClick，那我們就在FastClick源碼中屏蔽掉隊指定元素的處理，下面是我的處理代碼

 

 

在項目中全域添加FastClick導致圖片上傳外掛程式在ios端失效的解決方案