一、tap与click的区别

两者都会在点击时系统自动触发,但是在手机WEB端,click会有 200~300 ms。延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发click事件。所以触摸事件反应更快,体验更好。
singleTap和doubleTap 分别代表单次点击和双次点击。
tap封装了touchstart、touchmove、touchend三个事件的处理(touchstart之后如果有产生touchmove则取消此次tap事件的产生) click则只是单纯的绑定了浏览器的click事件。

二、tap事件点透问题

点击会触发非当前层的点击事件,这就是点透。例如:点击a但是同时触发了b元素的click事件,因为tap事件是通过document绑定了touchstart和touchend事件实现,$('.a')上,当touchend事件冒泡到document上以后执行$(this).hide();此时$('.b'),就处在了页面的最前面,现在touchend冒泡到了document上,并且$('.b')在页面的最前面,然后就触发了click事件。

三、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后触发的事件都不会被执行了。


转载于:https://www.cnblogs.com/exhuasted/p/7810639.html

移动端web,tap与click事件相关推荐

  1. fastclick.js移动端WEB开发,click,touch,tap事件浅析

    建议看看:http://www.cnblogs.com/yexiaochai/p/3442220.html 一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 ...

  2. 移动端WEB开发,click,touch,tap事件浅析

    2019独角兽企业重金招聘Python工程师标准>>> 一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用ta ...

  3. 移动端web开发,click touch tap区别

    转自: http://blog.csdn.net/sly94/article/details/51701188 移动端用tap时会有穿透问题 一:click与tap比较 click与tap都会触发点击 ...

  4. 移动端web开发---Touch事件详解

    一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 ​ 移动设备主要特点是不配备鼠标,键盘 ...

  5. vue 移动端点击延迟_vue移动端项目-click事件在浏览器中延迟300ms的解决方法

    在H5页面移动端项目当中,click事件在浏览器中会有300ms的延迟,这个也是移动端开发中常见的问题之一,今天就这个问题说一说解决方法 解决click点击事件300ms延迟-fastClick fa ...

  6. 滑动翻页效果实现和移动端click事件问题

    前述 本文很短~ 主要是为了总结和讲述移动端click和js事件机制导致的一个问题. (:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我- 正文 最近做了一个小活动,里面要用到一个效果:滑动翻页. ...

  7. HTML5滑动(swipe)事件,移动端触摸(touch)事件

    目有个交互需要实现手指滑动的交互,pc端使用mousedown,mousemove,mouseup监听实现. 但在ios设备上mousemove是不好监听的,同类的方法是touchstart,touc ...

  8. 【JS教程】移动端 Touch(触摸)事件

    一.pc端事件在移动端的问题 移动设备主要特点是不配备鼠标,键盘也只是在需要输入的地方才会激活虚拟键盘.所以以前的pc端事件在移动端使用起来就没有那么好用,虽然部分仍然可以使用. 1. click事件 ...

  9. 移动端为何不使用click而模拟tap事件及解决方案

    移动端为何不使用click而模拟tap事件及解决方案 参考文章: (1)移动端为何不使用click而模拟tap事件及解决方案 (2)https://www.cnblogs.com/ranyonsue/ ...

最新文章

  1. Java项目:考试系统Java基础Gui(java+Gui)
  2. 生成邮件图片签名的链接Gmail、hotmail 等... ...
  3. C4D中重点、难点分析
  4. debian linux 版本代号
  5. Linux系统调用--getrlimit()与setrlimit()函数详解
  6. 机器人动力学建模实例(二):三连杆机械臂
  7. 强化学习笔记1:强化学习概述
  8. 如何确定CPU是大端字节序还是小端字节序?
  9. python3-day2(基本回顾)
  10. pcs7更改项目计算机名时出错,PCS7 v8.1 亚洲版 问题汇总
  11. figtree需要在JAVA下运行吗,科学网—Inno setup 制作安装文件以编译FigTree为例 - 张金龙的博文...
  12. 2020年日历电子版(打印版)_2020全年共12个月的日历表打印版可图片年历-2020年日历A4打印版(每月一张-横版-完美版)下载Word带节假日农历电子版-西西软件下载...
  13. oppo小布机器人_OPPO小布助手2.0强势来袭 三大版块迎来重大升级
  14. NPOI导出word,NPOI导出word表格,NPOI复制table表格 XWPFDocument中XWPFTable
  15. 文本检测时对图片进行方向矫正
  16. Max-Product Loopy Belief Propagation
  17. Android UI开发细节Api使用技巧总结
  18. hal库串口dma卡死_STM32 HAL库 串口DMA发送完成中断
  19. ​田溯宁投的天润云上市:市值22亿港元 年利润下降75%
  20. 机械臂操作运动传送带上的物体

热门文章

  1. win10 ObservableCollection 排序自动收缩问题
  2. Python全栈开发:RabbitMQ/Redis/Memcache/SQLAlchemy
  3. Archlinux 下的 VMWare Workstation 维护笔记
  4. 51nod 算法马拉松18 B 非010串 矩阵快速幂
  5. git log 查看提交记录,参数:
  6. Apache服务器主配置文件 httpd.conf 中文版
  7. 请求https错误: unable to find valid certification
  8. flannel源码分析--LookupExtIface
  9. LOJ#2127「HAOI2015」按位或
  10. javascript之原型与原型链