【来源】:在开发移动端网站时,会经常徘徊在click和touchstart之间;因为touchstart虽然好用和快速响应;但是其缺点也是显而易见的,当我们大面积的使用touchstart的时候就会遇到,滚动页面的时候会频繁的触发,导致其不友好的体验;所以,不能单独的说哪个好与不好,而应该利用其长处,规避其缺点;

而且,对于a标签,在移动端的跳转方式,等同于click(经过自己实际体验)

【问题】在我们在上层触发touchstart的时候,下层的click或者a标签都会同时被触发(严格的讲是350ms之后触发)

【原理】是由于click的触发时间是500ms,而touchstart触发时间是350ms,由于500>350导致的用户出现了穿透问题

【解决办法】解决问题的办法有多重多样,换个角度换个方式,就有不同的答案;下面介绍几个我在实际中行之有效的方法,仅供参考:

  1. 可以把touchstart换成touchend,因为触发touchend需要200ms所以可以把触发时间这个原理问题解决掉(这个也是我经常使用的,处理点击问题)
  2. 大家也可以在触发下面一层覆盖上一层透明层,让其穿透到这个透明层,而不是有事件的那层(这种方法增加了层级,也增加的编码的复杂度)

移动端touchstart事件穿透问题,解决方案的更多相关文章

  1. 【移动端】300ms延迟以及点透事件原因以及解决方案

    产生原因 移动端会有双击缩放的这个操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是这次操作是不是双击 说完移动端点击300ms延迟的问题,还不得不提一下移动端点击穿透的 ...

  2. h5开发app,移动端 click 事件响应缓慢的解决方案

    造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...

  3. 手机端 zepto tap事件穿透

    什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 ...

  4. 移动端click事件延迟300ms到底是怎么回事,该如何解决?

    不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...

  5. 如何解决 touchstart 事件与 click 事件的冲突

    一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...

  6. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

  7. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  8. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  9. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

随机推荐

  1. openssl-0.9.8y

    openssl-0.9.8y 支持 32位和64位 编译不报错和向上兼容和向下兼容. http://www.openssl.org/source/openssl-0.9.8y.tar.gz https ...

  2. redis cluster 实现

    Redis cluster是一个redis官方提供的集群功能,集群节点最小3个节点,配置比较多,记录下来,以供下次使用.我在这使用的redis 4.0.6. 因为最新的ruby redis扩展需要ru ...

  3. linux运维记

    nmap 127.0.0.1 命令查看当前服务器对外有多少端口,用于检查漏洞 vim ctrl+z ,jobs,fg 切换控制应用程序 vim 执行命令 #!sh aa.sh执行命令 运维系统监控开源 ...

  4. SVN--版本控制系统

    引言 SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Subvers ...

  5. python初学--文件操作、字典

    文件读写 1.先打开文件 2.读取/写入内容 3.保存文件   文件的open模式有三种 1.w 写模式,它是不能读的 只要用w打开文件,文件中的东西都会被清空 w+, 写读模式,只要沾上w 就会清空 ...

  6. C#多线程编程之:集合类中Synchronized方法与SyncRoot属性原理分析

    我们知道,在.net的一些集合类型中,譬如Hashtable和ArrayList,都有Synchronized静态方法和SyncRoot属性,他们之间有联系吗?我怎么才能用好他们呢? 以Hashtab ...

  7. java的IO流之字符流

    # 原创,转载请留言联系 输出流 FileWriter类 常见的构造方法: FileWriter(String fileName)     根据给定的文件名构造一个 FileWriter 对象.Fil ...

  8. [转载]NGINX原理分析 之 SLAB分配机制

    作者:邹祁峰 邮箱:Qifeng.zou.job@hotmail.com 博客:http://blog.csdn.net/qifengzou 日期:2013.09.15 23:19 转载请注明来自&q ...

  9. LeetCode解题报告—— Interleaving String

    Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. Example 1: Input: s1 = ...

  10. 机器学习方法(五):逻辑回归Logistic Regression,Softmax Regression

    欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.技术.应用感兴趣的同学加入. 前面介绍过线性回归的基本知识, ...