你的位置:首页 > Java教程

[Java教程]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里面计算出来的差值基本上都是个位数。

 

测试代码如下所示:

<!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>