以前也在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. JavaScript权威设计--JavaScript词法结构(简要学习笔记二)

    1.字符集 JavaScript是用Unicode字符集编写的 2.区分大小写 html不区分大小写,xhtml区分大小写 如:html中onclick可以写成Onclick 但是js中必须写成onc ...

  2. 2. SVM线性分类器

    在一个线性分类器中,可以看到SVM形成的思路,并接触很多SVM的核心概念.用一个二维空间里仅有两类样本的分类问题来举个小例子.如图所示 和是要区分的两个类别,在二维平面中它们的样本如上图所示.中间的直 ...

  3. 不太被人提起的%%lockres%%的妙用

    %%lockres%% 这个值似乎很少被大家提到,甚至微软在官方文档中. 它返回是一个Hash Value,看乎这个值没什么用. 后来在实践也有它的妙用之处,比如在出现性能问题如LOCK时,一般先通过 ...

  4. 分享个 之前写好的 android 文件流缓存类,专门处理 ArrayList、bean。

    转载麻烦声明出处:http://www.cnblogs.com/linguanh/ 目录: 1,前序 2,作用 3,特点 4,代码 1,前序  在开发过程中,client 和 server 数据交流一 ...

  5. 哈夫曼（huffman）树和哈夫曼编码

    哈夫曼树 哈夫曼树也叫最优二叉树(哈夫曼树) 问题:什么是哈夫曼树? 例:将学生的百分制成绩转换为五分制成绩:≥90 分: A,80-89分: B,70-79分: C,60-69分: D,<60 ...

  6. CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  7. 基於tiny4412的Linux內核移植--- 中斷和GPIO學習（1）

    作者 彭東林 pengdonglin137@163.com 平臺 tiny4412 ADK Linux-4.4.4 u-boot使用的U-Boot 2010.12,是友善自帶的,爲支持設備樹和uIma ...

  8. SharePoint 2013 Create taxonomy field

    创建taxonomy field之前我们首先来学习一下如果创建termSet,原因是我们所创建的taxonomy field需要关联到termSet. 简单介绍一下Taxonomy Term Stor ...

  9. Oracle从文件系统迁移到ASM存储

    环境:RHEL 6.4 + Oracle 11.2.0.4 需求:数据库存储由文件系统迁移到ASM 数据库存储迁移到ASM磁盘组 1.1 编辑参数文件指定新的控制文件路径 1.2 启动数据库到nomo ...

  10. docker对数据卷容器进行备份

    转载请注明出处 官网的数据以及各大博客都没有对这个的具体说明,本人也是理解了好久. 我们使用docker的过程中,使用共享的数据卷是经常的,那么.我们要怎么进行备份呢?   首先,我们得了解下面4个命 ...