以前也在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. 基于Caffe的DeepID2实现(上)

    小喵的唠叨话:小喵最近在做人脸识别的工作,打算将汤晓鸥前辈的DeepID,DeepID2等算法进行实验和复现.DeepID的方法最简单,而DeepID2的实现却略微复杂,并且互联网上也没有比较好的资源 ...

  2. Hadoop Shell命令大全

    hadoop支持命令行操作HDFS文件系统,并且支持shell-like命令与HDFS文件系统交互,对于大多数程序猿/媛来说,shell-like命令行操作都是比较熟悉的,其实这也是Hadoop的极大 ...

  3. OpenCASCADE Job - Shoe Doctor

    鞋博士 鞋博士经过8年沉淀,在鞋类工业4.0全流程平台上积累了相当的技术实力,获投资商亲睐. 新的一年,在投资商协助下,将踏上新的征途,因此诚邀您加盟顶层技术合伙人. 如果您具备以下实力,我们期待您的 ...

  4. Android自定义View之圆环交替 等待效果

    学习了前面两篇的知识,对于本篇实现的效果,相信大家都不会感觉太困难,我要实现的效果是什么样呢?下面请先看效果图: 看上去是不很炫的样子,它的实现上也不是很复杂,重点在与onDraw()方法的绘制. 首 ...

  5. .NET Core采用的全新配置系统[8]: 如何实现配置与源文件的同步

    配置的同步涉及到两个方面:第一,对原始的配置文件实施监控并在其发生变化之后从新加载配置:第二,配置重新加载之后及时通知应用程序进而使后者能够使用最新的配置.接下来我们利用一个简单的.NET Core控 ...

  6. 读书笔记--SQL必知必会19--存储过程

    不同的DBMS对存储过程的实现不同,差异巨大,这里不涉及具体的DBMS,仅仅说明存储过程的简单含义. 19.1 存储过程 简单来说,存储过程就是为以后使用而保存的一条或多条SQL语句. 可以将存储过程 ...

  7. C站投稿189网盘视频源(UP主篇)

    C站投稿189网盘视频源(UP主篇) 现在C站(吐槽弹幕网)的视频来源基本靠的都是189网盘,比如番剧区的每个视频基本来源于此,不像AB两站,拥有自己的资源服务器,为啥呢?没钱啊.都是外来的视频.本站 ...

  8. 设计模式(十四)模板方法模式(Template Pattern)

    一.引言 提到模板,大家肯定不免想到生活中的“简历模板”.“论文模板”.“Word中模版文件”等,在现实生活中,模板的概念就是——有一个规定的格式,然后每个人都可以根据自己的需求或情况去更新它,例如简 ...

  9. 超越 JSON: Spearal 序列化协议简介

      Spearal 是一个新的开源的序列化协议,这个协议旨在初步替换JSON 将HTML和移动应用连接到Java的后端. Spearal的主要目的是提供一个序列协议,这个协议即使是在端点间传输的复杂的 ...

  10. Android Studio的SVN Performing VCS Refresh/Commit 长时间不结束

    给Android Studio项目里面的一个文件改名以后,再提交SVN时总是提示冲突,没办法解决.再后来不知道怎么弄的,每次提交时停留在SVN Performing VCS Refresh始终都不会完 ...