UC浏览器中touch事件的异常记录

　　以前也在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>