以前也在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. Quartz.NET Windows 服务示例

    想必大家在项目中处理简单的后台持续任务或者定时触发任务的时候均使用 Thread 或者 Task 来完成,但是项目中的这种需求一旦多了的话就得将任务调度引入进来了,那今天就简单的介绍一下 Quartz ...

  2. python基础操作以及hdfs操作

    目录 前言 基础操作 hdfs操作 总结 一.前言        作为一个全栈工程师,必须要熟练掌握各种语言...HelloWorld.最近就被"逼着"走向了python开发之路, ...

  3. Hibernate（5）—— 联合主键 、一对一关联关系映射（xml和注解） 和 领域驱动设计

    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及的知识点总结如下: One to One 映射关系 一对一单向外键(XML/Annotation) 一对一双向外键关联(XML/A ...

  4. EXP/IMP 导出生产库表的指定数据到测试库一例

    一般来讲,EXP/IMP是上一代导出导入程序,EXPDP/IMPDP是新一代的导出导入程序.对于大数据量的导出导入首选EXPDP/IMPDP,可以用到并行度,对表空间等操作上也更加的灵活.对于小数据量 ...

  5. C#基础回顾（二）—页面值传递、重载与重写、类与结构体、装箱与拆箱

    一.前言 -孤独的路上有梦想作伴,乘风破浪- 二.页面值传递 (1)C#各页面之间可以进行数据的交换和传递,页面之间可根据获取的数据,进行各自的操作(跳转.计算等操作).为了实现多种方式的数据传递,C ...

  6. 想着模仿京东微信首页呢，banner滚动搞定了，写到了一半了

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞 ...

  7. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  8. asp.net读取模版并写入文本文件

    本文要介绍的是ASP.NET怎样读写文本文件,但更重要的是实现的过程.使用的工具是Visual Studio 2015 ,.NET版本是4.6.1 .一共建立的2个项目,HoverTreePanel和 ...

  9. ABP学习日记1

  10. WCF学习系列二---【WCF Interview Questions – Part 2 翻译系列】

    http://www.topwcftutorials.net/2012/09/wcf-faqs-part2.html WCF Interview Questions – Part 2 This WCF ...