提升手持设备点击速度之touch事件带来的坑！
前言
上周六，我将我们项目的click换成了tap事件，于是此事如梦魇一般折磨了我一星期！！！
经过我前仆后继的努力，不计代价的牺牲，不断的埋坑填坑，再埋坑的动作，最后悲伤的发现touch事件确实是个坑！
但是touch事件带来的用户感受提高对我们来说是一巨大进步，所以一些问题我们必须攻克，然在下已几近黔驴技穷，最后使出了浑身解数以一恶心的手段暂时压制其问题......
现在分享被折磨过程，希望对各位有所帮助
点击不起作用
我使用的源码不是最新的，zepto初始化时便为document.body绑定touchstart、touchmove、touchend事件
所以我们现在每一次在手机上的点击都会触发一次touch事件，由此可能引起的BUG：
每次手指触屏都会触发touchstart等事件，可能堵塞浏览器本身行为
由于我们是单页应用，初始化会为body设置height为100%，就算进入列表页或者其它，body页高度不会增加，于是就会出现不可点击现象！
以去哪儿为例
由于其城市列表为absolute，其它dom皆不显示从而导致body实际高度为0，那么此时如果为城市绑定tap事件的话，那么tap事件
在ios手机上不会有作用，电脑上有用，某些android无效
此问题较容易解决：
① 让body可伸缩，跟着元素扩展（不易实现）
② 将事件绑定至document（推荐）
tap特有的点透现象
地球人都知道tap会出现点透现象，我这里上一个代码给各位测试一番
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
#list { border: 1px solid black; position: absolute; top: 0px; left: 10px; width: 200px; height: 100px; }
#d { border: 1px solid black; height: 300px; width: 100%; }
</style>
</head>
<body>
<div id="d">
<input type="text" id="input" style="width: 80px; height: 200px;" />
<div id="list">
</div>
</div>
</body>
<script src="res/libs/zepto.js" type="text/javascript"></script>
<script type="text/javascript">
window.log = function (msg) {
console.log(msg);
var div = $('#myMsg');
if (!div[0]) div = $('<div id="myMsg"></div>')
$('#d').append(div);
div.click(function () {
div.html('');
});
div.append($('<div>' + msg + '</div>'));
}
var list = $('#list');
var d = $('#d');
var input = $('#input'); input.tap(function (e) {
input.val(new Date().getTime());
}); list.tap(function (e) {
list.hide();
setTimeout(function () {
list.show();
}, 1000); }); d.tap(function () {
log('div tap');
});
</script>
</html>
这个页面有三个元素
① 父容器div，我们为他绑定了一个tap事件，会打印文字
② 在上的div，我们为其绑定了一个tap事件，点击便消失
③ input，主要用于测试focus问题
现在开启touch事件的情况下，我们点击上面的div，他会消失，于是：
div消失会触发div（list）的tap事件
div消失会触发input获取焦点事件
可能导致的项目BUG
以上问题可能导致些什么问题呢？
提示层一闪而过
我们可能会遇到这么一个场景：
表单提交页，用户提交时如果信息有误，会弹出一个提示，并且为蒙版添加click的关闭事件
但是有tap在的情况效果就不一样了，我们极有可能点击提交，弹出提示层，触发蒙版点击事件，蒙版关闭！！！
input获取焦点弹出键盘
我们可能遇到这种情况，我们在弹出层上做了一些操作后，点击弹出层关闭弹出层，但是下面有一个input（div有事件也行）
于是触发了div事件，于是input获取了焦点，某明奇妙的弹出来键盘！！！
BUG原因
以上问题是主要出现的问题，由此问题可能衍生出其它BUG，足以让我们苦不堪言！！！
但是引起这些问题的原因是什么呢？？？
先说冒泡
我们看zepto的touch事件源码，可以知道，我们一开始就将touchstart绑定到了document上，然后从e获取当前点击元素
完了触发touchend模拟tap等事件。
于是，首先我们想到了阻止冒泡是否可以解决问题：于是稍微修改下代码：
list.tap(function (e) {
list.hide();
setTimeout(function () {
list.show();
}, 1000);
e.stopPropagation();
});
事实证明，阻止冒泡后div（d）的tap事件不会被触发，但是input的获取焦点问题依旧不能解决
至于原因，我这里也只能是猜测div（d）的触发是由于冒泡引起，而就算阻止冒泡阻止浏览器默认操作也不能阻止input获取焦点
神奇菊花解决问题
于是经过老夫不泄的努力，终于发现一个恶心的方法，可以暂缓此问题，他就是菊花!!!!
先上个代码：
//该代码在zepto touch源码中
forTap = $('#forTap');
if(!forTap[0]) { forTap = $('<div id="forTap" style="background: black;color: White; display: none;
border-radius: 60px; position: absolute; z-index: 99999; width: 60px; height: 60px"></div>');
$('body').append(forTap);
} //touchstart
var el = touch.el; touch.isShowTap = false
while(el[0].nodeName != 'BODY'){
if(el.attr('lazyTap')) {
touch.isShowTap = true;
break;
}
el = el.parent();
} //touchend
var event = $.Event('tap')
event.cancelTouch = cancelAll touch.el.trigger && touch.el.trigger(event) if(touch.isShowTap) {
forTap.css({
top: (e.changedTouches[0].pageY - 30) + 'px',
left: (e.changedTouches[0].pageX - 30) + 'px'
})
forTap.show();
setTimeout(function () {
forTap.hide();
}, 350);
}
大家注意看代码，我现在为我们需要延迟的元素加一个lazyTap的属性
<div id="d">
<input type="text" id="input" style =" width: 80px; height: 200px;"/>
<div id="list" lazyTap="true">
</div>
</div>
于是我们现在点击div(d)时候就会马上有一朵菊花移动到他下面
大家看到那个黑色的菊花了么？？？
这朵菊花会跟着被设置了lazyTap的属性触发了tap后便不会引发下面的事件，于是把菊花的背景去掉，他就是一个隐藏的菊花了。。。。。。
于是，到此为止吧！！！
结语
菊花带来的问题也有很大多，第一个就是不专业，第二个就是如果为li设置了lazyTap属性，那么在Ul上面绑定的事件会不会冒泡上去，我也没有验证！！
但是，按道理应该被触发，所以！！！如果您有什么更好的解决方案，请务必留意！！！
提升手持设备点击速度之touch事件带来的坑！的更多相关文章
- 手持设备点击响应速度，鼠标事件与touch事件的那些事
前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
- 【读fastclick源码有感】彻底解决tap“点透”，提升移动端点击响应速度
申明!!!最后发现判断有误,各位读读就好,正在研究中.....尼玛水太深了 前言 近期使用tap事件为老夫带来了这样那样的问题,其中一个问题是解决了点透还需要将原来一个个click变为tap,这样的话 ...
- 彻底解决TAP(点透)提升移动端点击响应速度
使用fastclick 尼玛使用太简单了,直接一句: FastClick.attach(document.body); 于是所有的click响应速度直接提升,刚刚的!什么input获取焦点的问题也解决 ...
- 彻底解决tap“点透”，提升移动端点击响应速度
申明!!!最后发现判断有误,各位读读就好,正在研究中.....尼玛水太深了 前言 近期使用tap事件为老夫带来了这样那样的问题,其中一个问题是解决了点透还需要将原来一个个click变为tap,这样的话 ...
- javascript移动设备Web开发中对touch事件的封装实例
在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...
- Android Touch事件传递机制 二：单纯的（伪生命周期）
转载于:http://blog.csdn.net/yuanzeyao/article/details/38025165 在前一篇文章中,我主要讲解了Android源码中的Touch事件的传递过程,现在 ...
- Android Touch事件传递机制 一： OnTouch，OnItemClick（监听器），dispatchTouchEvent（伪生命周期）
ViewGroup View Activity dispatchTouchEvent 有 有 有 onInterceptTouchEvent 有 无 无 onTouchEvent 有 有 有 例 ...
- H5案例分享：移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- Android touch 事件传递机制
前言: (1)在自定义view的时候经常会遇到事件拦截处理,比如在侧滑菜单的时候,我们希望在侧滑菜单里面有listview控件,但是我们希望既能左右滑动又能上下滑动,这个时候就需要对触摸的touch事 ...
随机推荐
- hibernate（六）一对一映射
关系映射是指对象之间的关系,并不是指数据库的关系,关系映射是解决当对象处于以下关系之一时,数据库表该如何映射的问题 (一)一对一单向外键关联 1.注解方式配置 创建一个Husband类和Wife类 H ...
- SQL*Loader之CASE5
CASE5 1. SQL脚本 [oracle@node3 ulcase]$ cat ulcase5.sql set termout off rem host write sys$output &quo ...
- 机器学习&数据挖掘笔记_19（PGM练习三：马尔科夫网络在OCR上的简单应用）
前言: 接着coursera课程:Probabilistic Graphical Models上的实验3,本次实验是利用马尔科夫网络(CRF模型)来完成单词的OCR识别,每个单词由多个字母组合,每个字 ...
- Linux 内存管理
查看Linux内存使用情况 free -m Linux内存清理:绝大多数情况下都不需要此操作,因为cache的内存在需要的时候是可以自动释放的- 最好先sync几次,再清理内存,有下面三个级别,数值越 ...
- 优秀工具推荐：超实用的 CSS 库，样板和框架
当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间.在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效. 您可能感兴趣的相关文章 精 ...
- Quartz应用实践入门案例二(基于java工程)
在web应用程序中添加定时任务,Quartz的简单介绍可以参看博文<Quartz应用实践入门案例一(基于Web应用)> .其实一旦学会了如何应用开源框架就应该很容易将这中框架应用与自己的任 ...
- JAVA 设计模式 中介者模式
用途 中介者模式 (Mediator) 用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显示地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 中介者模式是一种行为型模式. 结 ...
- js基础篇——encodeURI 和encodeURIComponent
转自zccst的又一次掉进encodeURIComponent的坑里了 问题: ajax.get ( url+'?k1'=v1+'&k2'=v2+'&k3'=v3, ... ); 由于 ...
- SQL Server时间粒度系列----第6节基于当前日的小时数和分钟数与mysql unix_timestamp和from_unixtime的mssql实现
本文目录列表: 1.基于当前日的小时数和分钟数2.mysql unix_timestamp和from_unixtime的mssql实现 3.总结语 4.参考清单列表 基于当前日的小时数和分钟数 ...
- Winform控件重写
Winform控件重写 因为最近的项目中越来越多的遇到了比较特殊的一些控件,有时候我们自己封装一下可能更加方便我们的使用,下面是我们项目中用到的,简单做一个记录. TextBox控件重写 主要的控制代 ...