您现在的位置是:首页 > 文章列表 > JavaScript > FastClick是什么?一文搞懂原理解析​

FastClick是什么?一文搞懂原理解析​

admin 2020-08-17 09:52 304人围观
简介 为什么要用FastClick在移动端H5开发过程中,关于点触可能会遇到如下两个问题:手动点击与真正触发click事件会存在300ms的延迟点击穿透问题(点击行为会穿透元素触发非父子...

我们为什么要使用fastclick?在移动端H5开发过程中,关于点触可能会遇到如下两个问题:手动点击与真正触发click事件会存在 300ms 的延迟和点击穿透问题(点击行为会穿透元素触发非父子关系元素的事件)。 点击穿透问题(点击行为会穿透元素触发非父子关系元素的事件)

原理过程

  // 业务代码
  var $test = document.getElementById('test')
  $test.addEventListener('click', function () {    console.log('1 click')
  })  // FastClick简单实现
  var targetElement = null
  document.body.addEventListener('touchstart', function () {    // 关键点1:记录点击的元素
    targetElement = event.target
  })  document.body.addEventListener('touchend', function (event) {    // 关键点2:阻止默认事件(屏蔽之后的click事件)
    event.preventDefault()    var touch = event.changedTouches[0]    // 关键点3:合成click事件,并添加可跟踪属性forwardedTouchEvent
    var clickEvent = document.createEvent('MouseEvents')
    clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null)
    clickEvent.forwardedTouchEvent = true // 自定义的
    targetElement.dispatchEvent(clickEvent)
  })

原理说明:
在document.body 上绑定 touchstart 和 touchend
其中,touchstart 用于记录当前点击元素的targetElement。
touchend 用于:

  • 组织默认事件(屏蔽之后的click事件)

  • 合成click事件,并添加可跟踪属性forwardedTouchEvent

  • 在 targetElement 上触发 click 事件

  • targetElement 上绑定的事件立即执行!done

点击穿透

比如,页面上有A和B元素,B在A上面。在B元素的touchstart事件上注册了一个回调函数,该回调函数的作用是隐藏B元素。我们发现,当我们点击B元素,B元素被隐藏了,随后,A元素触发了click事件。
fastclick
移动端上面,事件执行顺序是:touchstart > touchend > click。而 click 事件有300ms延迟,浏览器触发了click事件,但是此时B元素不见了,所以该事件被派发到了A元素身上。如果A元素是一个链接,那此时页面就会意外地跳转。

其他解决方案

禁用缩放
当HTML文档头部包含如下meta标签时:

<meta name="viewport" content="user-scalable=no"><meta name="viewport" content="initial-scale=1,maximum-scale=1">

表明这个页面是不可缩放的,那双击缩放的功能就没有意义了,此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。

这个方案有一个缺点,就是必须通过完全禁用缩放来达到去掉点击延迟的目的,然而完全禁用缩放并不是我们的初衷,我们只是想禁掉默认的双击缩放行为,这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下,我们还是希望页面能通过双指缩放来进行缩放操作,比如放大一张图片,放大一段很小的文字。


阅读排行

  • Vue 的最佳使用方法

    Vue框架,是我国内最受欢迎的前端框架之一,也许你的项目正在使用,也许你还在了解正准备上手...

  • FastClick是什么?一文搞懂原理解析​

    FastClick是什么?一文搞懂原理解析​ 为什么要用FastClick在移动端H5开发过程中,关于点触可能会遇到如下两个问题:手动点击与真正...

  • 提升CSS技能的20个小技巧

    提升CSS技能的20个小技巧 随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样...

  • uni-app介绍

    uni-app介绍 uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Andr...

  • 一文彻底弄懂Event Loop!

    一文彻底弄懂Event Loop! 我们在学习浏览器和NodeJS的EventLoop时,往往是阅读大量文章,多篇文章凑在一起综合来看,才...

  • 生活中常用正则表达式

    生活中常用正则表达式 很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是...

  • vue组件通信你了解多少

    本文会介绍常见的通信方式,并分析每种方式的使用场景和注意点。

  • 10 种跨域解决方案

    10 种跨域解决方案 说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了...

本栏推荐

官方微信