Skip to content

Instantly share code, notes, and snippets.

@ninan1028

ninan1028/des.txt

Created June 20, 2017 02:04
Show Gist options
  • Save ninan1028/bd5d09d5fe72462f8415e08ef9e35060 to your computer and use it in GitHub Desktop.
Save ninan1028/bd5d09d5fe72462f8415e08ef9e35060 to your computer and use it in GitHub Desktop.
Download ZIP
移动端点击穿透 300ms延迟
Raw
des.txt
什么是点击穿透？
假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。
这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。
方案二：FastClick
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。
http://www.jianshu.com/p/6e2b68a93c88
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment