以前也在UC上面栽過幾個坑，不過都是頁面顯示方面的。上個周的時候，商品詳情頁重做，要添加個上拉顯示詳情的效果。
有兩個條件需要判斷：
1、是否到達底部；
2、到達底部之后拖動的y軸距離。
效果寫完后，本地chrome模擬和手機chrome測試OK，在手機QQ、微信內置瀏覽器以及UC出現BUG。
經多次測試發現在UC中有如下幾個問題：
1、touch事件的順序不一致
手指觸摸后進行拖動操作然后離開屏幕，在chrome里面的順序是：touchstart->touchmove->touchend。
而在UC下面的順序是touchstart->touchmove，然后就沒有了！touchend綁定的函數死活都不觸發。
后來查了下，UC在觸摸結束離開屏幕的時候觸發的事件是touchcancel，得同時對touchcancel進行判斷。
2、touchcancel函數最后計算出來的差值也不一致
手指在屏幕進行拖動操作的時候，在chrome里面會生成touchmove*n個事件。
而在UC里面，之后在拖動的最初會觸發一個touchmove事件，對，就是一個！
所以拖動同樣的距離，在UC里面計算出來的差值基本上都是個位數。
測試地址：
http://sandbox.runjs.cn/show/mrb5b7in
測試代碼如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta http-equiv="Expires" CONTENT="-1"> <meta http-equiv="Cache-Control" CONTENT="no-cache"> <meta http-equiv="Pragma" CONTENT="no-cache"> <meta charset="UTF-8"> <title>uc touch test</title> <style type="text/css"> #touchBox {margin: 100px auto; width: 300px; height: 300px;border: 1px solid #000;} p {color:#000;} </style> </head> <body> <div id="touchBox"> <p>初始: <span id="coordStart"></span></p> <p>移動：<span id="coordMove"></span></p> <p>結束：<span id="coordEnd"></span></p> <p>事件：<span id="moveEvent"></span></p> </div> </body> </html> <script type="text/javascript"> var x,y,ex,ey,mx,my; var s = document.getElementById('coordStart'), m = document.getElementById('coordMove'), e = document.getElementById('coordEnd'), ev = document.getElementById('moveEvent'), b = document.getElementById('touchBox'); b.addEventListener("touchstart",touchStart,false); b.addEventListener("touchmove",touchMove,false); b.addEventListener("touchend",touchEnd,false); b.addEventListener("touchcancel",touchCancel,false); function touchStart(){ var touch = event.targetTouches[0]; x = touch.pageX; y = touch.pageY; s.innerHTML = x+","+y; } function touchMove(){ var touch = event.targetTouches[0]; mx = touch.pageX; my = touch.pageY; ex = x - touch.pageX; ey = y - touch.pageY; m.innerHTML = mx+","+my; } function touchEnd(){ ev.innerHTML = 'touchend'; e.innerHTML = ex+","+ey; } function touchCancel(){ ev.innerHTML = 'touchcancel'; e.innerHTML = ex+","+ey; } </script>