tap 和click 事件区别
clike事件和 Zepto.js 中tap的区别
首先介绍下Zepto:
最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小。
介绍下tap和click的区别:
两者都会在点击时触发,但是在web手机端,clikc会有200-300ms的延时,所以要用tap代替click作为点击事件,singleTap和doubleTap分别作为单次点击和双击,但是使用tap会带来点透事件(事件穿透)。
介绍下什么是tap事件穿透:
执行完上层绑定的tap事件后,下层如果绑定这click事件或者本身就存在点击事件(a/input)也会默认触发,这就是tap点透事件
下面正规解释下tap点透事件发生的场景:
当A/B两个层上下Z轴叠层,上层的A点击后消失或者移开(原因接下来会讲),当B元素本身默认有click事件或者绑定click事件,这种情况下,点击A/B重叠的部分,就会出现点透事件
点透现象出现的原因:
首先要知道tap事件是通过监听绑定document上的touch事件来模拟的,并且tap事件是冒泡到document上才触发的;
touchstart:在这个dom上用手触摸就能开始
click:在这个dom上用手触摸,且手指未曾移动,且在这个dom上手指离开屏幕,且触摸和离开时间很短(有的浏览器可能不检测时间间隔,照样可以触发click),才开始触发。
也就是说在移动端的事件触发从早到晚排序:touchstart touchstop click 。 所以click的触发是有延时的,about 300ms
由于我们在touchstart阶段就已经隐藏了A,当click被触发时,能够被点击的就是B;
介绍下click事件的触发规则:
触发当前有click的元素,且该元素面朝用户的最前端,才会触发click。
上面B中,由于B绑定了click或者B本身存在click,所以B也被触发了,(因为在touchstart阶段就已经隐藏了A),于是就产生了点透事件
介绍下解决方法:
1.github上有一个叫做fastclick的库https://github.com/ftlabs/fastclick
然后给需要的元素绑定click事件,这样就不会延时啦,据说还会比tap更快
2.为元素绑定touchend事件,并在内部加上e.preventDefault();
监听touchend事件,阻止A元素的touchend的默认行为,从而阻止click事件的产生
参考:https://blog.csdn.net/qq_31751569/article/details/77922603
tap 和click 事件区别的更多相关文章
- 移动端web,tap与click事件
一.tap与click的区别 两者都会在点击时系统自动触发,但是在手机WEB端,click会有 200~300 ms.延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发 ...
- 移动端tap与click的区别 && 点透事件
移动端的问题 移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有c ...
- fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别
之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...
- tap,touch,touchstart,事件与click事件的区别
根据源码所见, 移动端为了将将单击事件更加灵敏,所以现在的JQM,ST...框架都将JS单击事件封装成tap,或者touch或者touchstart事件, 其实现本质是将click触发多次,以打成移动 ...
- zepto学习(一)之click事件和tap事件比较
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap分别 ...
- 关于移动端的Click事件
在移动端执行Click事件,通常情况出现有300毫秒的延迟,为防止这种不必要的延迟效果,我们可以换种方式来实现,同样达到快速执行Click事件的效果. 先了解一下移动端Click的执行顺序: touc ...
- 移动开发那些坑之——safari mobile click事件的冒泡bug
今天在iphone6 plus的safari上测试这么一段代码: <script> $(document).on('click','.callApp', function() { aler ...
- 关于a标签自身的click事件所带来的一些影响
众所周知a标签自身带有点击事件<a href="#"></a>从它本身的特性来讲并没有什么不好的影响,但是如果你在a标签里又加入onclick事件则< ...
- ios h5 app avalon tap点击事件失效及点击延迟300ms问题解决方法
1.ios h5 app avalon tap事件失效 使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-ta ...
随机推荐
- Unity Shader序列帧动画学习笔记
Unity Shader序列帧动画学习笔记 关于无限播放序列帧动画的一点问题 在学shader的序列帧动画时,书上写了这样一段代码: fixed4 frag(v2f i){ // 获得整数时间 flo ...
- BitAdminCore框架应用篇:(二)创建一个简单的增删改查模块
NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/cookie ...
- 数据导出之winform导出word(三)
本篇文章补充讲解上篇文章中word模板的制作. ① 新建一个word文档 ② 定位到要插入书签的位置 ③ 菜单栏 “插入” -> “书签”,输入书签名,点击“添加” 可以多处位置使用同样的书签名 ...
- VS中ReportView的坑爹问题
ReportViewer不是.netframework提供的,而是visual studio提供的组件,它依赖如下组件: Microsoft.ReportViewer.Winforms.dll Mic ...
- C#字符串转UNICODE
public static string StringToUnicode(string s)//字符串转UNICODE代码 { char[] charbuffers = s.ToCharArray() ...
- pandas 对dataframe一列中某些值进行处理
https://github.com/Bifzivkar/Boutique-Travel-Services-Predict/blob/master/feature/5_extract_feature. ...
- python学习笔记6-集合
# 集合是无序且不可重复的元素的集合 a = set([1,3,1,3,3,2,2,5]) a # {1, 2, 3, 5} b = set(range(2,5)) b # {2, 3, 4} # 1 ...
- Python 读取大文件的方式
对于读取容量小的文件,可以使用下面的方法: with open("path", "r") as f: f.read() 但是如果文件容量很大,高达几个G或者十几 ...
- java.util包详解
介绍Java的实用工具类库java.util包.在这个包中,Java提供了一些实用的方法和数据结构.本章介绍Java的实用工具类库java.util包.在这个包中,Java提供了一些实用的方法和数据结 ...
- pods报错修复方法
### Error ``` RuntimeError - [!] Xcodeproj doesn't know about the following attributes {"inputF ...