以前也在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. SQL Server 系列文章快速导航（SWF版）

    一.前言 在博客园写博客不自不觉已经有5个年头了,一开始只是为了记录工作中遇到的问题和解决办法,后来写的文章不自不觉的侧重在SQL Server方面的技术文章,在2014年1月终于鼓起勇气申请了微软S ...

  2. 生成任意长度的随机数 JS

    1.Math.random().toString(36).substr(2); 结果:ywv6cnpkliahj4tep0 2.   1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  3. 窥探Vue.js 2.0

    title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...

  4. MVC5 网站开发之四 业务逻辑层的架构和基本功能

    业务逻辑层在Ninesky.Core中实现,主要功能封装一些方法通过调用数据存储层,向界面层提供服务.   目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 ...

  5. webService学习之路（二）：springMVC集成CXF快速发布webService

    继上一篇webService入门之后,http://www.cnblogs.com/xiaochangwei/p/4969448.html ,现在我将我周六在家研究的结果公布出来 本次集成是基于之前已 ...

  6. iOS开发之三个Button实现图片无限轮播(参考手机淘宝，Swift版)

    这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...

  7. XLT架构图（自己 画的）

  8. 编写高质量代码:改善Java程序的151个建议(第3章:类、对象及方法___建议47~51)

    建议47:在equals中使用getClass进行类型判断 本节我们继续讨论覆写equals的问题,这次我们编写一个员工Employee类继承Person类,这很正常,员工也是人嘛,而且在JavaBe ...

  9. 【Asp.Net Core】二、添加控制器和视图

    控制器Controller 在添加控制器前,我们先看下它为我们自动生成的一些Controller,我们看下AccountController.cs 来看下登录验证方法Login async这个应该是异 ...

  10. C#计算代码行数

    class Program { static void Main(string[] args) { int totalLineCount = 0; string directory; if(args. ...