這兩天自己在寫一個手機(jī)網(wǎng)頁，用到了觸屏滑動的特效轧房，就是往右滑動的時候左側(cè)隱藏的菜單從左邊劃出來先誉。
做完之后在手機(jī)原生瀏覽器中運(yùn)行正常湿刽，但在QQ和微信中打開，發(fā)現(xiàn)touchmove只會觸發(fā)一次褐耳，而且touchend也經(jīng)常不觸發(fā)诈闺。
之后百度了一下這個問題，原因是
主要是由于200ms超時導(dǎo)致內(nèi)核不一定會一直處理touchmove事件铃芦，一旦超時會將后續(xù)所有的事件轉(zhuǎn)交給UI處理雅镊，導(dǎo)致touchmove不會一直觸發(fā)襟雷。
為了解決開發(fā)者需要，建議開發(fā)者在touchstart時調(diào)用event.preventDefault仁烹，這樣就可以保證內(nèi)核會一起觸發(fā)touchmove事件了耸弄。
地址：http://bbs.mb.qq.com/thread-201794-1-1.html
根據(jù)上面所說，在touchstart中添加了event.preventDefault()方法卓缰，在QQ和微信中果然正常了计呈。
但是！Ｕ骰！捌显！頁面中的超鏈接點(diǎn)擊沒反應(yīng)了！ｗ⑼摇苇瓣！給其他地方加的click事件也不觸發(fā)了！３ス浴击罪！
之后繼續(xù)百度，得知當(dāng)在移動端上點(diǎn)擊屏幕時贪薪，會依次觸發(fā)touchstart,touchmove,touchend,click事件媳禁。
之后測試了一下，發(fā)現(xiàn)正確的觸發(fā)過程應(yīng)該是：touchstart→touchmove→touchend或者touchstart→touchend→click画切。
如果在點(diǎn)擊屏幕的時候手指滑動的話竣稽，是不會觸發(fā)click事件的。
參考地址：http://www.tuicool.com/articles/3QZ7jeV
上面說event.preventDefault()的方法霍弹，會阻止事件的默認(rèn)行為毫别。可以通過調(diào)用preventDefault()方法典格，可以阻止后面事件的觸發(fā)岛宦。
我知道event.preventDefault()會阻止a標(biāo)簽?zāi)J(rèn)的動作(跳轉(zhuǎn)到href指定的頁面)，但是為什么click也不觸發(fā)了呢耍缴？
之后我大膽推測了一下：
會不會是因?yàn)樵谝苿佣薱lick事件的觸發(fā)條件就是必須touchstart和touchend同時觸發(fā)才能觸發(fā)click呢砾肺？
我在touchstart中調(diào)用了event.preventDefault方法，是不是讓瀏覽器誤以為沒有觸發(fā)touchstart事件防嗡，只觸發(fā)了touchend事件变汪，所以沒有觸發(fā)click事件呢？
之后我刪除了touchstart中的event.preventDefault方法蚁趁，果然超鏈接和click事件都觸發(fā)了裙盾，但是前面說的問題又出現(xiàn)了，在QQ和微信中touchmove和touchend又出問題了。
怎么辦呢闷煤？
后來突然腦袋靈光一閃童芹，既然在touchstart中加了event.preventDefault會導(dǎo)致不觸發(fā)click事件，那我在touchmove中加可以吧鲤拿？
抱著試一試的心態(tài)，果然好了署咽，click能順利觸發(fā)近顷，QQ和微信中也沒有問題，我以為這樣就好了宁否，但是為什么頁面不能滾動了窒升？
原來touchmove中添加event.preventDefault方法之后會阻止瀏覽器默認(rèn)的滾動。慕匠。饱须。
所以頁面無法滾動了，之后又去找找找台谊，找了很久一直沒找到怎么解決這個問題蓉媳，突然想起之后用的一個移動端的圖片輪播插件，
為什么他們可以左右滑動锅铅，不影響click事件和a標(biāo)簽酪呻，也不影響頁面的滾動。
然后我打開了這個插件的源碼盐须，終于在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軸的移動值玩荠，判斷當(dāng)前是往哪個方向滑動，如果是在x軸上滑動（左右）贼邓，就調(diào)用event.preventDefault()方法阶冈，如果是在y軸上滑動（上下），就不調(diào)用event.preventDefault()塑径。
然后測試一下女坑，QQ和微信中特效沒有問題，click事件和a標(biāo)簽鏈接也可以順利觸發(fā)晓勇，頁面滾動也沒有問題堂飞。
所有問題終于解決了。绑咱。
總結(jié)一下：
在QQ和微信（當(dāng)然還包括其他瀏覽器绰筛，不過我沒測試過）中如果有需要用到touch事件做的特效一定要在touchstart或者touchmove中添加event.preventDefault()方法。
在touchstart中如果有event.preventDefault()方法描融， 將不會觸發(fā)click事件和a標(biāo)簽方法铝噩。在這里可以使用tap代替click，但是a標(biāo)簽的話就不太方便了窿克。
如果在touchmove中有event.preventDefault()方法骏庸，最好加上方向判斷毛甲，當(dāng)然如果你頁面內(nèi)容不需要滾動條就不需要加判斷了。
