移动端web,tap与click事件
一、tap与click的区别
singleTap和doubleTap 分别代表单次点击和双次点击。
tap封装了touchstart、touchmove、touchend三个事件的处理(touchstart之后如果有产生touchmove则取消此次tap事件的产生) click则只是单纯的绑定了浏览器的click事件。
二、tap事件点透问题
三、tap事件点透解决
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源码不依赖其他库所以你可以在原生的js前直接加上window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
或者有zepto或者jqm的js里面加上$(function() {
FastClick.attach(document.body);
});
当然require的话就这样:var FastClick = require("fastclick");
FastClick.attach(document.body, options);
实践开发中,当元素绑定fastclick后,click响应速度比tap还要快一点。
2.对于B元素本身存在默认click事件的情况,应用touchend代替tap事件并阻止掉A元素touchend的默认行为preventDefault(),从而阻止click事件的产生。 $("#aa").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});
对于B元素本身没有默认click事件的情况(无a标签等),应统一使用touch事件,统一代码风格,并且由于click事件在移动端的延迟要大很多,不利于用户体验,所以关于触摸事件应尽量使用touch相关事件。
延迟一定的时间(300ms+)来处理事件
$("#aa").on("tap", function (event) {
setTimeout(function(){
//很多处理比如隐藏什么的
},320);
});
这种方法其实很好,可以和fadeInIn/fadeOut等动画结合使用,可以做出过度效果
理论上上面的方法可以完美的解决tap的点透问题,如果真的倔强到不行,改用click。特别是对于遮盖浮层,由于遮盖浮层的点击即使有小延迟也是没有关系的,反而会有疑似更好的用户体验,所以这种情况,可以针对遮盖浮层自己采用click事件,这样就不会出现点透问题。
如何解决穿透:
方法一:直接将上层元素的tap事件换成click事件(会出现300ms的延迟触发事件)
方法二:在click事件触发前阻止它,如在touchend的事件中使用e.preventDefault()来阻止后续的click事件
zepto为何不使用e.preventDefault()来解决穿透问题?
因为zepto的tap事件统一是在document的touchend时触发的,若在这里使用e.preventDefault(),那页面上所有元素在touchend后触发的事件都不会被执行了。
移动端web,tap与click事件的更多相关文章
- 移动端WEB开发,click,touch,tap事件浅析
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- 移动端web开发,click touch tap区别
转自: http://blog.csdn.net/sly94/article/details/51701188 移动端用tap时会有穿透问题 一:click与tap比较 click与tap都会触发点击 ...
- tap 和click 事件区别
clike事件和 Zepto.js 中tap的区别 首先介绍下Zepto: 最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小. 介绍下tap ...
- 移动端Web界面滚动touch事件
解决办法一: elem.addEventListener( 'touchstart', fn, { passive: false } ); 解决办法二: * { touch-action: pan-y ...
- Touch事件在移动端web开发中的详解
一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 移动设备主要特点是不配备鼠标,键盘 ...
- 基于vue的移动端web音乐播放器
声明 以下只是学习完慕课网huangyi老师实战视频课程的笔记内容,仅供个人参考学习使用.如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话,请移步这里:https://coding.i ...
- web开发,click,touch,tap事件浅析
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- 移动端为何不使用click而模拟tap事件及解决方案
移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...
- 移动端tap与click的区别 && 点透事件
移动端的问题 移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有c ...
随机推荐
- [转载]10款流行的Markdown编辑器
10款流行的Markdown编辑器 http://www.csdn.net/article/2014-05-05/2819623 作为一个开源人,如果你不会使用Markdown语法,那你就OUT了!M ...
- 解决tomcat下面部署多个项目log4j的日志输出会集中输出到一个项目中的问题
在一次项目上线后,发现了一个奇怪的问题,经过对源码的阅读调试终于解决,具体经过是这样的: 问题描述:tomcat7下面部署多个项目,log4j的日志输出会集中输出到一个项目中,就算配置了日志文件的绝对 ...
- CSS-3 文字阴影—text-shadow 的使用
text-shadow还没有出现的时候,大家在网页中的阴影就是用ps一张图片作为背景.那么现在有了CSS3的这个属性,日后我们的工作会更简洁些. text-shadow之前出现过,不过不久就被Pass ...
- 【LibreOJ】#6354. 「CodePlus 2018 4 月赛」最短路 异或优化建图+Dijkstra
[题目]#6354. 「CodePlus 2018 4 月赛」最短路 [题意]给定n个点,m条带权有向边,任意两个点i和j还可以花费(i xor j)*C到达(C是给定的常数),求A到B的最短距离.\ ...
- CodeForces 1059B
Description Student Andrey has been skipping physical education lessons for the whole term, and now ...
- Memcached命令:简单获取缓存value用法
Memcached:命令用法1.cmd 输入telnet ip 端口 进入memcached服务端窗口比如:xxx.Token_T1435622096xxx为key获取此key的memcached ...
- ZYNQ. LwIP.PHY.KSZ9031RNX
新一块板子 米尔科技的 z-turn 使用的PHY芯片是Micrel的 KSZ9031RNX 而不是zedboard上的Marvell的. 直接使用lwip的echo server demo时会报错 ...
- Servlet笔记9--Cookie
Cookie: 使用Cookie机制实现十天内免登陆: Servlet程序: package com.bjpowernode.javaweb.servlet; import java.io.IOExc ...
- 记一次HashMap面试
记一次HashMap面试 从网上已经身边同事朋友的面试情况来看,面试HashMap几乎是必问的,网上也很多类似的文章,但是真面起来,发现还是有很多点可以深抠的.本篇就结合一次面试经历说一下之前没有注意 ...
- Install Shield中调用devcon自动安装硬件驱动程序
1.安装驱动程序命令devcon安装好WINDDK之后,devcon.exe在"C:\WINDDK\3790.1830\tools\devcon"目录下.>devcon up ...