移动端click时间、touch事件、tap事件详解
一、click 和 tap 比较
两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件。
singleTap和doubleTap 分别代表单次点击和双次点击。
二、关于tap的点透处理
在使用zepto框架的tap来移动设备浏览器内的点击事件,来规避click事件的延迟响应时,有可能出现点透的情况,即点击会触发非当前层的点击事件。
处理方式:
(1)、
github上有一个叫做fastclick的库,它也能规避移动设备上click事件的延迟响应,https://github.com/ftlabs/fastclick
将它用script标签引入页面(该库支持AMD,于是你也可以按照AMD规范,用诸如require.js的模块加载器引入),并且在dom ready时初始化在body上,如:
1
2
3
|
$( function (){ new FastClick(document.body); }) |
然后给需要“无延迟点击”的元素绑定click事件(注意不再是绑定zepto的tap事件)即可。
当然,你也可以不在body上初始化它,而在某个dom上初始化,这样,只有这个dom和它的子元素才能享受“无延迟”的点击
实践开发中发现,当元素绑定fastclick后,click响应速度比tap还要快一点点。哈哈
(2)、为元素绑定touchend事件,并在内部加上e.preventDefault();
$demo.on(
'touchend'
,
function
(e){
//
改变了事件名称,tap是在body上才被触发,而touchend是原生的事件,在dom本身上就会被捕获触发
$demo.hide()
e.preventDefault();
//
阻止“默认行为”
})
其中包括:touchstart,touchmove,touchend,touchcancel 这四个事件
touchstart,touchmove,touchend事件可以类比于mousedown,mouseover
,mouseup的触发。
touchstart : 当手指触摸到屏幕会触发;
touchmove : 当手指在屏幕上移动时,会触发;
touchend : 当手指离开屏幕时,会触发;
当然还有一个touchcancel,是在拖动中断时候触发。
例如:
这4个事件的触发顺序为:
touchmove
-> …… -> touchmove ->touchend
但是单凭监听上面的单个事件,不足以满足我们去完成监听在触屏手机常见的一些手势操作,如双击、长按、左右滑动、缩放等手势操作。需要组合监听这些事件去封装对这类手势动作。
其实市面上很多框架都针对手机浏览器封装了这些手势,例如jqmobile、zepto、jqtouch,不过悲剧发生了,对于某些Android系统(我自己测试到的在android 4.0.x),touchmove和touchend事件不能被很好的触发,举例子说明下:
比如手指在屏幕由上向下拖动页面时,理论上是会触发 一个 touchmove
,和最终的 touchend ,可是在android 4.0上,touchmove只被触发一次,触发时间和touchstart
差不多,而touchend直接没有被触发。这是一个非常严重的bug,在google Issue已有不少人提出 http://code.google.com/p/android/issues/detail?id=19827
暂时我只发现在android 4.0会有这个bug,据说 ios 3.x的版本也会有。
而显然jqmobile、zepto等都没有意识到这个bug对监听实现带来的严重影响,所以在直接使用这些框架的event时,或多或少会出现兼容性问题!
转载自:http://www.xuebuyuan.com/2174858.html
移动端click时间、touch事件、tap事件详解的更多相关文章
- tap事件的原理详解
点击事件延迟问题所在: 在移动端中,由于两次触摸是放大操作,,所以当你点击一次的时候,浏览器会等待300ms,看用户是否会进行第二次点击,如果没有的话,才会执行点击事件 为什么要解决: 随着h5游戏, ...
- Android Touch事件传递机制详解 下
尊重原创:http://blog.csdn.net/yuanzeyao/article/details/38025165 资源下载:http://download.csdn.net/detail/yu ...
- Android事件传递机制详解及最新源码分析——ViewGroup篇
版权声明:本文出自汪磊的博客,转载请务必注明出处. 在上一篇<Android事件传递机制详解及最新源码分析--View篇>中,详细讲解了View事件的传递机制,没掌握或者掌握不扎实的小伙伴 ...
- javascript event(事件对象)详解
javascript event(事件对象)详解 1. 事件对象 1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...
- Android开发——事件分发机制详解
0. 前言 转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52566965 深入学习事件分发机制,是为了解决在Android开发中 ...
- JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
- jquery移除、绑定、触发元素事件使用示例详解
这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...
- C#事件与委托详解
from https://www.cnblogs.com/sjqq/p/6917497.html C#事件与委托详解[精华 多看看] Delegatedelegate是C#中的一种类型,它实际上是一个 ...
- Android事件分发机制详解
事件分发机制详解 一.基础知识介绍 1.经常用的事件有:MotionEvent.ACTION_DOWN,MotionEvent.ACTION_MOVE,MotionEvent.ACTION_UP等 2 ...
- Android 的事件传递机制,详解
Android 的事件传递机制,详解 前两天和一个朋友聊天的时候.然后说到事件传递机制.然后让我说的时候,忽然发现说的不是非常清楚,事实上Android 的事件传递机制也是知道一些,可是感觉自己知道的 ...
随机推荐
- C++ 中函数后面跟const是什么意思
问题:c++:void display( ) const 中的const是什么意思?简答:意思是除了表明了mutable的成员变量以外该类的其他的成员变量在这个函数内一律不能修改. 详细:加const ...
- Layer:如何调用layer.open打开的的iframe窗口中的JS?
layer.open({type: 2,content: 'test/iframe.html',success: function(layero, index){ var body = layer.g ...
- Linux下安装并配置SSH服务
一.使用命令检测Linux系统上是否已经安装了SSH服务:(命令:rpm -qa |grep ssh) 二.如果没有安装SSH软件包,可以通过yum 或rpm安装包进行安装(命令:yum instal ...
- SharePoint 2016 功能比较
SharePoint 2016中有很多功能.我们经常和客户谈论SharePoint安装时,我问他们是否计划安装SharePoint Server 2016 Standard或Enterprise.通常 ...
- 如何对ABAP SE80 workbench做增强
流程如下: 要获取更多Jerry的原创文章,请关注公众号"汪子熙":
- Android(java)学习笔记135:SQLite数据库(表)的创建 以及 SQLite数据库的升级
一.数据库的创建 1.文件的创建 //引用,如果文件不存在是不会创建的 File file = new File("haha.txt"): //输出流写数据 ...
- 交叉熵cross entropy和相对熵(kl散度)
交叉熵可在神经网络(机器学习)中作为损失函数,p表示真实标记的分布,q则为训练后的模型的预测标记分布,交叉熵损失函数可以衡量真实分布p与当前训练得到的概率分布q有多么大的差异. 相对熵(relativ ...
- Java压缩字符串工具类
StringCompressUtils.java package javax.utils; import java.io.ByteArrayInputStream; import java.io.By ...
- 如何远程连接Windows server上的MySQL服务
废话不多说,直接开干 首先要打开服务器的MySQL端口号:3306(当然,也可以把服务器的防火墙直接关闭,不过不安全) 1.打开服务器管理器,有个高级安全Windows防火墙,下面有一个入站规则, 右 ...
- 主成分分析法(PCA)答疑
问:为什么要去均值? 1.我认为归一化的表述并不太准确,按统计的一般说法,叫标准化.数据的标准化过程是减去均值并除以标准差.而归一化仅包含除以标准差的意思或者类似做法.2.做标准化的原因是:减去均值等 ...