移动端web开发,click touch tap区别
移动端用tap时会有穿透问题
一:click与tap比较
click与tap都会触发点击事件,但是在手机web端,click会有200-300ms的延迟,所以一般用tap代替click作为点击事件。singleTap 和doubleTap分别代表单次点击和双次点击
二:tap的穿透处理
使用zepto框架的tap的点击事件,来规避click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件。
三:穿透原因
问题:在HTML5点击了q以后,弹出b的弹框
因为tap事件是通过document绑定了touchstart和touchend事件实现,$('.q')上,当touchend事件冒泡到document上以后执行$(this).hide();此时$('.b'),就处在了页面的最前面
现在touchend冒泡到了document上,并且$('.b')在页面的最前面,然后就触发了click事件
四:解决穿透问题
1.github上有一个叫做fastclick的库,它能规避移动设备上click事件的延迟响应https://github.com/ftlabs/fastclick将它用script标签引入页面(该库支持AMD,可按照AMD规范,用require.js的模块加载器引入),并且在dom ready时初始化在body上,如:
$(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();//阻止“默认行为”
});
五:touch事件
touch是针对触屏手机上的触摸事件。现金大多数触屏手机webkit内核提供了touch事件的监听
包含:touchstart touchmove touchend touchcancel四个事件
touchstart touchmove touchend事件可以类比于mousedown mouseover mouseup的触发
- BZOJ4753: [Jsoi2016]最佳团体
- 3101: N皇后
- 算法模板——线性欧拉函数
- jdbc基础 (一) MySQL的简单使用
- 小白博客 爆破内网mysql数据库root密码脚本代码
- 2818: Gcd
- 1688: [Usaco2005 Open]Disease Manangement 疾病管理
- 通过MySQL自动同步刷新Redis
- 13.MySQL(一) 数据库简介mysql安装数据库操作Mysql数据类型存储引擎
- 3314: [Usaco2013 Nov]Crowded Cows
- BZOJ4766: 文艺计算姬
- 14.MySQL(二) 数据之表操作表内容操作Mysql 连接事务外键
- 3450: Tyvj1952 Easy
- SP104 HIGH - Highways
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- docker 安装mysql5.7
- php面试笔记(5)-php基础知识-自定义函数及内部函数考点
- AJAX的一个简单实例,跨域的解决,使用JQuery来进行ajax的调用
- ASP.NET Core 将文件夹内容输出为压缩包文件方法
- 如何阻止指定类型的SAP CRM附件被上传到服务器
- Docker 之NameSpace与Cgroup
- 微信网页扫码登录和公众号网页授权登录的比较
- 【TBase开源版测评】分布式数据库复制表关联查询
- v-decorator的取值与赋值
- fastjson导致spring security oauth2的token序列化错误
- 微信小程序webview,a锚点跳转,回退时一直保留在原页面
- SLURM使用教程
- MIME 类型大全,你值得收藏
- Jetbrains系列---PyCharm, Goland翻译插件推荐Translation
- 熬夜总结了 “HTML5画布” 的知识点(共10条)