移动端touchstart事件穿透问题,解决方案
【来源】:在开发移动端网站时,会经常徘徊在click和touchstart之间;因为touchstart虽然好用和快速响应;但是其缺点也是显而易见的,当我们大面积的使用touchstart的时候就会遇到,滚动页面的时候会频繁的触发,导致其不友好的体验;所以,不能单独的说哪个好与不好,而应该利用其长处,规避其缺点;
而且,对于a标签,在移动端的跳转方式,等同于click(经过自己实际体验)
【问题】在我们在上层触发touchstart的时候,下层的click或者a标签都会同时被触发(严格的讲是350ms之后触发)
【原理】是由于click的触发时间是500ms,而touchstart触发时间是350ms,由于500>350导致的用户出现了穿透问题
【解决办法】解决问题的办法有多重多样,换个角度换个方式,就有不同的答案;下面介绍几个我在实际中行之有效的方法,仅供参考:
- 可以把touchstart换成touchend,因为触发touchend需要200ms所以可以把触发时间这个原理问题解决掉(这个也是我经常使用的,处理点击问题)
- 大家也可以在触发下面一层覆盖上一层透明层,让其穿透到这个透明层,而不是有事件的那层(这种方法增加了层级,也增加的编码的复杂度)
移动端touchstart事件穿透问题,解决方案的更多相关文章
- 【移动端】300ms延迟以及点透事件原因以及解决方案
产生原因 移动端会有双击缩放的这个操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是这次操作是不是双击 说完移动端点击300ms延迟的问题,还不得不提一下移动端点击穿透的 ...
- h5开发app,移动端 click 事件响应缓慢的解决方案
造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...
- 手机端 zepto tap事件穿透
什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 ...
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- 如何解决 touchstart 事件与 click 事件的冲突
一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...
- 移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
- H5案例分享:移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
随机推荐
- python基础===discover函数介绍
discover(start_dir,pattern='test*.py',top_level_dir=None) 找到指定目录下所有测试模块,并可递归查到子目录下的测试木块,只有匹配到的文件名才会被 ...
- [转载]Python: 你不知道的 super
原文出处: geekvi super() 的入门使用 在类的继承中,如果重定义某个方法,该方法会覆盖父类的同名方法,但有时,我们希望能同时实现父类的功能,这时,我们就需要调用父类的方法了,可通过使用 ...
- yml格式
是什么? yml文件扩展名是YAML的缩写,YAML于2001年出现,是一种数据描述语言,和xml类似 为什么用它? 我们在做javaweb项目的时候最常见的就是.xml配置文件和properitie ...
- 在Xcode中使用自定义的代码片段提高效率
拖动代码的时候按住option键,很难拖,注意方法:< 引用于:http://www.2cto.com/kf/201409/336245.html
- linux命令(22):mkdir命令
实例1:创建一个空目录 mkdir test 实例2:递归创建多个目录 mkdir -p /home/test 实例3:创建权限为777的目录 mkdir -m 777 test 实例4:创建新目 ...
- 《逐梦旅程 WINDOWS游戏编程之从零开始》笔记1——创建窗口&GDI
第1章 创建窗口 步骤: 窗口类的设计 窗口类的注册 窗口的正式创建 窗口的显示与更新 消息循环体系 窗口过程函数处理消息 1. 设计:使用WNDCLASSEX结构体,这里注意的是C++中的结构体中的 ...
- opencv c++实用操作
像素遍历 对单通道图像的遍历处理 For( int i =0 ; i < grayim.rows; i++) For(int j = 0; j<grayim.cols; j++) Gray ...
- Java学习笔记(十二)——eclipse和SVN配置,导入SVN服务器项目
[前面的话] 北京的天气外加自己的不小心终于病了,在病的过程中,感觉身体好着真好,可以学习,可以吃好吃的,可以去运动,这一病了,干什么都感觉没有力气,身体好着真好. 这个文章的背景是:领导把项目最开始 ...
- C++ cin.ignore()用法
cin.ignore(int a,char b); a为一行中最大读取字符长度,b为某一个字符.在缓冲区中寻找b,找到后忽略b以前的所有字符(包括b).如果在a的范围内还没有找到b,则忽略b以前的所有 ...
- 我一直记不住的vim用法
一.多行编辑进入visual block模式一般模式下Crtl+v组合键以块的形式选中待编辑的文本 进入visual line模式一般模式下大写V以行的形式选中待编辑的文本 上述两种模式的复制用y,删 ...