移动端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事件的更多相关文章
- 移动端click时间、touch事件、tap事件详解
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- 移动端click延迟和tap事件
一.click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象. 1.背景 由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击 ...
- 移动端前端常见的触摸相关事件touch、tap、swipe等整理
前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...
- 移动端tap与click的区别 && 点透事件
移动端的问题 移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有c ...
- 移动端前端常见的触摸相关事件touch、tap、swipe
前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click.touch.tap.swipe事件,也有定义型的gest ...
- 移动端 之 触摸事件、Tap事件和swipe事件
触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触 ...
- tap事件的原理详解
点击事件延迟问题所在: 在移动端中,由于两次触摸是放大操作,,所以当你点击一次的时候,浏览器会等待300ms,看用户是否会进行第二次点击,如果没有的话,才会执行点击事件 为什么要解决: 随着h5游戏, ...
- 移动端WEB开发,click,touch,tap事件浅析
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- 移动端为何不使用click而模拟tap事件及解决方案
移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...
随机推荐
- CCOrbitCamera
Cocos2d-x提供了一中根据球面坐标轨迹旋转的方式CCOrbitCamera CC_DEPRECATED_ATTRIBUTE static CCOrbitCamera* actionWithDur ...
- CShopDialog类
#ifndef SHOP_H #define SHOP_H #include "XWidget.h" #include "GameConfig.h" class ...
- Memcached安装以及PHP的调用
Memcached安装以及PHP的调用 [南京·10月17日]OSC源创会开始报名:Swift.大型移动项目构架分享 » 一:安装libevent 由于memcached安装时,需要使用libeven ...
- Angular+Electron+VSCode的桌面应用
Angular+Electron+VSCode的桌面应用 转自:http://blog.csdn.net/yr7942793/article/details/50986696 第一部分 Electro ...
- 路由搭建ovpn
教程一(外网搭建): 1. 注册花生壳帐号,同时系统会赠送一个免费的域名 2.登录华硕路由,找到花生壳代码设置花生壳登录名和密码.域名,删掉前面的"#"后,点击应用本页面设置,软重 ...
- 读取数据库中timestamp类型去掉毫秒
数据库中查询出来的时间是:2015-09-24 14:30:26.2,带有毫秒,需要去掉. 方法一: public static Timestamp getSystemTime() { Date dt ...
- XmlFactoryBean和DefaultListableBeanFactory学习
首先提供了一个Spring容器最简单的例子. bean的定义,MyTestBean.java public class MyTestBean { private String testStr = &q ...
- 2018-11-21 ko.pureComputed的使用
以前一直在想,ko.pureComputed 好像用不上.看起来高大上. 今天在修复一个bug时,发现了它的妙处. 在修改商品列表的页面,弹出一个新增商品的页面.关闭之后,怎么通知修改商品列表的页面发 ...
- git 停止在12% writing objects 怎么回事?
git 停止在12% writing objects 怎么回事? 输入以下代码试一下: git config --global http.postBuffer 524288000
- 把本地仓库导入到Github
1, create a new rep 2, 进入到本地仓库: $ git remote set-url origin URL 3,上传 git push -v ref: https://www.do ...