fastclick解决移动端click事件延迟300ms和点击穿透

简介: 在开发webApp和移动端的时候,常常遇到移动端点击响应慢的问题,因此查找各方资料,整理解决方案加以记录

前言

在开发webApp和移动端的时候,常常遇到移动端点击响应慢的问题,因此查找各方资料,整理解决方案加以记录

  1. 移动端click事件存在300ms延迟

    为什么?
    由于浏览器双击缩放机制的设定,点击一次无法判断是否需要打开某一链接,因此需要等待300ms.

    解决:使用fastclick
    1、安装

    npm install fastclick

    2、 不同使用方式
    全局html

    <meta name="viewport" content="width=device-width, initial-scale=1">

    2.1、vue
    main.js全局域

    import fastClick from 'fastclick';
    fastClick.attach(document.body);

    2.2、jquery

    <script type="text/javascript" src='https://cdn.bootcdn.net/ajax/libs/fastclick/1.0.6/fastclick.js'></script>
    $(function() {
        FastClick.attach(document.body);
    });

    2.3、js

    if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
            FastClick.attach(document.body);
        }, false);
    }
  2. 点击穿透
    既然click点击有300ms的延迟,那对于触摸屏,我们直接监听touchstart事件不就好了吗?

使用touchstart去代替click事件有两个不好的地方。
第一:touchstart是手指触摸屏幕就触发,有时候用户只是想滑动屏幕,却触发了touchstart事件,这不是我们想要的结果;
第二:使用touchstart事件在某些场景下可能会出现点击穿透的现象。

什么是点击穿透?
假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数,该回调函数的作用是隐藏B元素。我们发现,当我们点击B元素,B元素被隐藏了,随后,A元素触发了click事件。

这是因为在移动端浏览器,事件执行的顺序是touchstart > touchend >
click。而click事件有300ms的延迟,当touchstart事件把B元素隐藏之后,隔了300ms,浏览器触发了click事件,但是此时B元素不见了,所以该事件被派发到了A元素身上。如果A元素是一个链接,那此时页面就会意外地跳转。






相关文章
|
JavaScript
实现 Vue 框架用户短时间内多次点击同一按钮仅触发一次
使用 Vue 框架开发项目中,遇到个问题,就是在用户提交数据时,如果连续多次点击按钮,会触发多次,导致数据异常,因此需要限制用户短时间内多次点击同一按钮,只触发一次。
1080 0
实现 Vue 框架用户短时间内多次点击同一按钮仅触发一次
|
3月前
|
JavaScript
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
265 0
|
存储 缓存 固态存储
三分钟解决AE缓存预览渲染错误、暂停、卡顿问题
三分钟解决AE缓存预览渲染错误、暂停、卡顿问题
1121 2
|
前端开发 JavaScript API
轮播图-动态响应轮播图-测试&amp;移动端切换 |学习笔记
快速学习 轮播图-动态响应轮播图-测试&amp;移动端切换
277 0
轮播图-动态响应轮播图-测试&amp;移动端切换 |学习笔记
|
小程序 前端开发 iOS开发
小程序页面左右滑动如何解决
小程序页面左右滑动如何解决
|
开发者
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
484 0
|
JavaScript 前端开发
倒计时跳转和获取实时时间
本文内容如题,自己做的一个demo,倒计时和获取实时时间在许多场景都用的到,所以还算蛮实用的,需要的朋友可以做个参考。 代码解析:html代码 <body onload="startTime()"> <div class="box"> <div class="time">请等待<span id="dd">6</span>秒</div> <!--设置时间长一点,不然一直跳转很烦--> ![](aaa.png) <div class="id-box"> <div id="time"></div>
273 0
倒计时跳转和获取实时时间
|
移动开发 iOS开发
移动端阻止弹窗下层页面被滑动方法介绍
移动端阻止弹窗下层页面被滑动方法介绍
|
iOS开发
iOS 跳转到二级页面时tabbar延迟几秒消失问题解决方法
iOS 跳转到二级页面时tabbar延迟几秒消失问题解决方法
587 0
|
API Android开发 索引
复杂type页面封装库,支持多种状态切换和下拉刷新上拉加载
目录介绍 1.复杂页面库介绍 2.本库优势亮点 2.1 支持多种状态切换管理 2.2 支持添加多个header和footer 2.3 支持侧滑功能和拖拽移动 2.4 其他亮点介绍 3.如何使用介绍 3.
1259 0