• 移动端touchstart事件穿透问题,解决方案


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

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

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

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

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

    1. 可以把touchstart换成touchend,因为触发touchend需要200ms所以可以把触发时间这个原理问题解决掉(这个也是我经常使用的,处理点击问题)
    2. 大家也可以在触发下面一层覆盖上一层透明层,让其穿透到这个透明层,而不是有事件的那层(这种方法增加了层级,也增加的编码的复杂度)
  • 相关阅读:
    [剑指offer] 42. 和为S的两个数字
    [剑指offer] 41. 和为S的连续正数序列
    datagridview bindingsource刷新数据
    datagridview bindingsource
    slot-具名插槽
    基于uniapp的ui库
    组件之间通讯
    vue实现word或pdf文档导出的功能
    Vue之富文本tinymce爬坑录
    12道vue高频原理面试题,你能答出几道?
  • 原文地址:https://www.cnblogs.com/liu-fei-fei/p/7159434.html
Copyright © 2020-2023  润新知