移動端touch事件影響click事件以及在touchmove添加preventDefault致使頁面沒法滾動的解決方法

轉自：http://www.qdfuns.com/notes/21896/30348b857757f18cde60e7b4c885fe6e.html

 

這兩天本身在寫一個手機網頁，用到了觸屏滑動的特效，就是往右滑動的時候左側隱藏的菜單從左邊劃出來。

作完以後在手機原生瀏覽器中運行正常，但在QQ和微信中打開，發現touchmove只會觸發一次，並且touchend也常常不觸發。

以後百度了一下這個問題，緣由是

主要是因爲200ms超時致使內核不必定會一直處理touchmove事件，一旦超時會將後續全部的事件轉交給UI處理，致使touchmove不會一直觸發。

爲了解決開發者須要，建議開發者在touchstart時調用event.preventDefault，這樣就能夠保證內核會一塊兒觸發touchmove事件了。

地址：http://bbs.mb.qq.com/thread-201794-1-1.html
根據上面所說，在touchstart中添加了event.preventDefault()方法，在QQ和微信中果真正常了。

可是！！！頁面中的超連接點擊沒反應了！！！給其餘地方加的click事件也不觸發了！！！

以後繼續百度，得知當在移動端上點擊屏幕時，會依次觸發touchstart,touchmove,touchend,click事件。

以後測試了一下，發現正確的觸發過程應該是：touchstart→touchmove→touchend或者touchstart→touchend→click。

若是在點擊屏幕的時候手指滑動的話，是不會觸發click事件的。

參考地址：http://www.tuicool.com/articles/3QZ7jeV
上面說event.preventDefault()的方法，會阻止事件的默認行爲。能夠經過調用preventDefault()方法，能夠阻止後面事件的觸發。

我知道event.preventDefault()會阻止a標籤默認的動做(跳轉到href指定的頁面)，可是爲何click也不觸發了呢？

以後我大膽推測了一下：

會不會是由於在移動端click事件的觸發條件就是必須touchstart和touchend同時觸發才能觸發click呢？

我在touchstart中調用了event.preventDefault方法，是否是讓瀏覽器誤覺得沒有觸發touchstart事件，只觸發了touchend事件，因此沒有觸發click事件呢？

以後我刪除了touchstart中的event.preventDefault方法，果真超連接和click事件都觸發了，可是前面說的問題又出現了，在QQ和微信中touchmove和touchend又出問題了。

怎麼辦呢？

後來忽然腦殼靈光一閃，既然在touchstart中加了event.preventDefault會致使不觸發click事件，那我在touchmove中加能夠吧？

抱着試一試的心態，果真好了，click能順利觸發，QQ和微信中也沒有問題，我覺得這樣就行了，可是爲何頁面不能滾動了？

原來touchmove中添加event.preventDefault方法以後會阻止瀏覽器默認的滾動。。。

因此頁面沒法滾動了，以後又去找找找，找了好久一直沒找到怎麼解決這個問題，忽然想起以後用的一個移動端的圖片輪播插件，

爲何他們能夠左右滑動，不影響click事件和a標籤，也不影響頁面的滾動。

而後我打開了這個插件的源碼，終於在touchmove中找到了答案

在touchmove中有這樣一段代碼(下面是我本身抄過來簡化過的)：

 

var w = x<0?x*-1:x;     //x軸的滑動值
var h = y<0?y*-1:y;     //y軸的滑動值
if(w>h){                //若是是在x軸中滑動
   event.preventDefault();
}

 

就是在touchmove中判斷x軸和y軸的移動值，判斷當前是往哪一個方向滑動，若是是在x軸上滑動（左右），就調用event.preventDefault()方法，若是是在y軸上滑動（上下），就不調用event.preventDefault()。

而後測試一下，QQ和微信中特效沒有問題，click事件和a標籤連接也能夠順利觸發，頁面滾動也沒有問題。

全部問題終於解決了。。



總結一下：

在QQ和微信（固然還包括其餘瀏覽器，不過我沒測試過）中若是有須要用到touch事件作的特效必定要在touchstart或者touchmove中添加event.preventDefault()方法。

在touchstart中若是有event.preventDefault()方法， 將不會觸發click事件和a標籤方法。在這裏可使用tap代替click，可是a標籤的話就不太方便了。

若是在touchmove中有event.preventDefault()方法，最好加上方向判斷，固然若是你頁面內容不須要滾動條就不須要加判斷了。