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

    /* * 文件名:FtpUtil.java * 版权:Copyright 2000-2007 Huawei Tech. Co. Ltd. All Rights Reserved. * 描述: TopE ...

  2. Xcode下的批量编辑

    说明:目前为止我找到三种查找与替换功能,如果有更多的方式,请在下面留言 第一种:我们常用的查找以及查找与替换功能 在Windows下,使用Ctrl+f 快捷键查找.用Ctrl+h来进行查找与替换功能. ...

  3. .Net MVC中的路由

    MVC中的URL也就是路由,不用通过路径访问实际的物理文件而达到向用户展示界面. URL的路由功能 一方面正向 映射到Controller和Action,根据用户输入的URL触发相应的控制器和对应方法 ...

  4. Linq专题之匿名对象

    匿名对象是c#3.0的一个新的机制,使用new关键字和一个对象的初始化器,就能创建一个匿名对象.顾名思义,创建的时候这个对象是一个匿名类型的对象,没有具体的类型.说到匿名对象,那么我们前面讲过的var ...

  5. 2016 Al-Baath University Training Camp Contest-1 G

    Description The forces of evil are about to disappear since our hero is now on top on the tower of e ...

  6. Oracle 常用命令大全

    一.如何有效地利用数据字典 ORACLE的数据字典是数据库的重要组成部分之一,它随着数据库的产生而产生, 随着数据库的变化而变化, 体现为sys用户下的一些表和视图.数据字典名称是大写的英文字符. 数 ...

  7. Nginx完整配置说明

    http://blog.csdn.net/marising/article/details/3979493 可以参考如下的完整例子 http://wiki.codemongers.com/NginxF ...

  8. [jobdu]调整数组顺序使奇数位于偶数前面

    这道题的代码没啥好说的,用了O(n)的空间就是水题了.但可以讲一下思考过程.一开始是想O(1)的空间的,然后想从左往右双指针扫,然后根据出现顺序交换遇到的偶数和奇数.但遇到一个问题:1, 2, 3, ...

  9. 利用NIO建立Socket服务器

    传统的Java 的IO,利用Socket建立服务器,接收客户端连接,一般都是为每一个连接建立一个线程,如果连接数巨大,那么服务器开销也将巨大..NIO的原理,可以参照图:http://new.51ct ...

  10. wget ( download the whole page from the website )

    ---恢复内容开始--- wget -m -e robots=off -U "Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.1 ...