移动端的传统click事件延迟和点透现象
一、场景描述:
1.A/B两个层上下z轴重叠。
2.上层的A点击后消失或移开。(这一点很重要)
3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件。
在以上情况下,点击A/B重叠的部分,就会出现点透的现象。
二、点透现象的分析
在移动端不使用click而用touch事件代替触摸是因为click事件有着300ms的延迟,事件触发的顺序:
touchstart——touchmove——touchend——click
touchstart:在这个DOM(或冒泡到这个DOM)上手指触摸开始即能立即触发
click:在这个DOM(或冒泡到这个DOM)上手指触摸开始,且手指未曾在屏幕上移动,且在这个在这个dom上手指离开屏幕,且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间,也会触发click)才能触发
由于我们在touchstart阶段就已经隐藏了罩层A,当click被触发时候,能够被点击的元素则是其下的B元素,根据click事件的触发规则:
只有在被触发时,当前有click事件的元素显示,且在面朝用户的最前端时,才触发click事件。
由于B绑定了click事件(或者B本身默认存在click事件),所以B的click事件被触发,产生了点透的情况。
三、有什么解决方案呢
1、在处理一下弹层、遮罩层的显示于隐藏,可以优先考虑用click事件,因为click刚好的延迟,在这种交互下反而会有疑似更好的用户体验
2、如果对于B元素本身没有默认click事件的情况(无a标签等),应统一使用touch事件,统一代码风格,并且由于click事件在移动端的延迟要大很多,不利于用户体验,所以关于触摸事件应尽量使用touch相关事件。
3、对于B元素本身存在默认click事件的情况,应及时取消A元素的默认点击事件(e.preventDefault()),从而阻止click事件的产生,但是这种方式对于链接的默认点击事件并不好处理
4、利用库类解决,比如新版的zeptotap事件、fastclick(https://github.com/ftlabs/fastclick )、hammer等通用库。
注:所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成
移动端的传统click事件延迟和点透现象的更多相关文章
- 移动端的touch click事件的理解+点透
移动端在touch上一共有4个事件 touchstart touchmove touchend touchcancel, touchcancel, 一般来说,它们执行的顺序为 touchstart - ...
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 移动端click事件延迟300ms的原因以及解决办法[转载]
原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...
- 移动端的click事件延迟触发的原理是什么?如何解决这个问题?
移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟 会出现点透现象 在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- 苹果浏览器移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 解决在移动端上 click事件延迟300 毫秒的问题 fastclick.js
1 为什么会发生延迟300毫秒的问题 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了FastClick ...
- angularJS在移动端的点击事件延迟问题
在运用angular开发移动端的应用时,发现它并没有将ng-click做兼容,在移动端使用ng-click事件仍然会有300ms延迟.后来发现angular有一个专门针对移动端的模块:angular- ...
- html 手机端click 事件延迟问题(fastclick.js使用方法)
下载地址: fastclick.js 为什么存在延迟? 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击 ...
随机推荐
- AngularJS--自定义指令和模板
一.自定义指令: 1. 先创建模块 var app=angular.module("myApp",[]); 2. 创建自定义指令 (directive后面的参数一:自定义指令 ...
- http升https笔记
证书申请的: 1.lets encrypt 国际公益项目发展很快的,不过在国内暂时有些支持度还不够高,如微信安卓版就不认lets encrypt的证书.跳转进去一直处于空白页状态 2.沃通证书 国内 ...
- hadoop2的思想架构
mapreduce 2 思想架构 mr2解决了mr1的jobTracker的单点颈瓶问题,这个问题会影响hadoop的扩展性,集群的可靠性,mr1中jobTracker负责集群作业的分发,管理,调度, ...
- C/C++中无条件花括号的妙用
C/C++中无条件花括号可以形成一个代码块,一个作用域.可以使括号内定义的变量就只在本域(就是这个大括号)内有效,而且不会影响其他域,即使名字相同. 在花括号内,如果变量前面带类型,则相当于新创建一个 ...
- 【Mybatis框架】查询缓存(二级缓存)
继上一篇博客,我们讲述了mybatis的一级缓存,接下来,我们来学习一下mybatis的二级缓存 博客链接地址: http://blog.csdn.NET/liweizhong193516/artic ...
- 从零开始山寨Caffe·肆:线程系统
不精通多线程优化的程序员,不是好程序员,连码农都不是. ——并行计算时代掌握多线程的重要性 线程与操作系统 用户线程与内核线程 广义上线程分为用户线程和内核线程. 前者已经绝迹,它一般只存在于早期不支 ...
- EntityFrame CodeFirst 自动生成表
来源:http://msdn.microsoft.com/zh-cn/data/jj193542 本视频和分步演练介绍通过 Code First 开发建立新数据库.这个方案包括建立不存在的数据库(Co ...
- python练习
创建一个简单的姓名和编号系统,让用户输入一组人的姓名和编号,实现提供按照编号或姓名排序输出的功能. nums = [] names = [] Afternums = [] Afternames = [ ...
- C# 线程调用主线程中的控件
由于项目的需要,最近几天一直在做串口和数据库.由于C#使用的时间不长,所以在编写代码和调试的过程中总是遇到意想不到的问题,比如在使用串口接收数据的时候,在接收数据事件中想把接收的数据放入一个textb ...
- WebForms 开发基础
webform开发方式 xml - 可扩展的标记语言 HTML - 超文本标记语言 运行: 点击启动按钮 - 好处:可以卡断点 弊端:启动特别慢 在html上右键,在浏览器中查看 - 好处:启动特别快 ...