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

　　　　

　　　　　　

UC浏览器中touch事件的异常记录的更多相关文章

  1. Python_socket常见的方法、网络编程的安全注意事项、socketsever模块、浏览器中在一段时间记录用户的登录验证机制

    1.socket常见的方法 socket_常见方法_服务器端 import socket from socket import SOL_SOCKET,SO_REUSEADDR sk = socket. ...

  2. UC浏览器中Ajax请求中传递数据的一个坑

    今天突然收到一个bug,有用户在其浏览器环境中一直无法提交内容,使用的是UC浏览器.当换成Chrome时,内容能够正常提交.鉴于本地没有一直使用Firefox 以及Chrome,于是去下载了一个UC ...

  3. UC浏览器中，设置了position: fixed 的元素会遮挡z-index值更高的同辈元素

    "UC浏览器中,设置了position: fixed 的元素会遮挡z-index值更高的同辈元素(非fixed)." 我们使用的artDialog弹窗中,在UC浏览器中,如果页面高 ...

  4. Android中Touch事件分析--解决HorizontalScrollView滑动和按钮事件触发问题

    之前写过关于HorizontalScrollView滑动和按钮事件触发问题,但是不能所有的情况,最近几天一直在想这个问题,今天有一个比较好的解决思路,最终应用在项目里面效果也很好,首先说明一下功能: ...

  5. JavaScript 浏览器中的事件

    1.事件的基本概念 事件是指在文档或者浏览器中发生的一些特定交互瞬间,比如打开某一个网页,浏览器加载完成后会触发 load 事件,当鼠标悬浮于某一个元素上时会触发 hover 事件,当鼠标点击某一个元 ...

  6. WAP端 touch事件触发顺序记录

    IOS7.0 safari 滚动滚动条的时候, 最后手指放开 (scroll 总是在 touchend后面,所以要用 setTimeout) touchstart touchmove(多个) touc ...

  7. UC 浏览器远程调试手机web网页记录

    浏览器远程调试插件有很多,本来要使用chrome浏览器的调试插件的,但是需要FQ才能使用(公司网络有限制,果断放弃),最终选择使用UC浏览器的. 其实UC官网插件使用已经介绍的很详细了,但是有几处坑需 ...

  8. 关于 Chrome 浏览器中 onresize 事件的 Bug

    我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...

  9. android studio上代码编译调试中遇到的一些异常记录

    下面是记录的在平时代码编写或编译时的一些异常,答案有自己摸索出来的,也有参考其他程序猿朋友的,参考文章过多,就不一一贴出来了. ① E/JavaBinder: !!! FAILED BINDER TR ...

随机推荐

  1. ASP.NET MVC系列：Model

    1. Model任务 Model负责通过数据库.AD(Active Directory).Web Service及其他方式获取数据,以及将用户输入的数据保存到数据库.AD.Web Service等中. ...

  2. Boostrap入门(一)

    1.第一步:下载Boostrap有关文件 Boostrap中文网:http://www.bootcss.com/ -->--> 2.第二步: 如下代码:引入相关文件即可. <!DOC ...

  3. Python标准模块--asyncio

    1 模块简介 asyncio模块作为一个临时的库,在Python 3.4版本中加入.这意味着,asyncio模块可能做不到向后兼容甚至在后续的Python版本中被删除.根据Python官方文档,asy ...

  4. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（13）-系统日志和异常的处理③

    系列目录 上一节我们讲了如何捕获异常和记录日志,这一节我们讲,没有捕获的或者忘记捕获的异常包括404错误等,我们统一处理这个异常. 这一讲是利用 Application_Error 捕获所有异常,全局 ...

  5. JS瀑布流布局

    好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...

  6. 绑定一个值给radio

    在ASP.NET MVC程序中,需要给一个radio list表绑定一个值. 下面是Insus.NET实现的方法: 使用foreach来循环radio每一个选项,如果值与选项的值相同,那这个选项为选中 ...

  7. 判断IEnumerable<T>集合中是否包含有T对象

    比如,有角色集合中,只有用户创建有角色,才出现“分配”铵钮.反之,隐藏. IEnumerable有一个方法,叫Any:

  8. [C1] 分离 C1FlexGrid 滚动条

    一  场景介绍 Silverlight 5.0 的 C1FlexGrid 控件里自带的滚动条,是嵌入在 C1FlexGrid 宽度和高度的范围里的,效果如下图所示: (未隐藏自带滚动条) (隐藏自带的 ...

  9. HTML课上小结

    HTML翻译为超文本标记语言<标签名>内容</标签名>静态网页动态网页的区别是看是否从数据中提取数据一般网页由几部分组分组成<html>开始标签 <head& ...

  10. java重载与覆写

    很多同学对于overload和override傻傻分不清楚,建议不要死记硬背概念性的知识,要理解着去记忆. 先给出我的定义: overload(重载):在同一类或者有着继承关系的类中,一组名称相同,参 ...