html电脑上面点击穿透,click300ms点击问题和点击穿透.html

Document

点我

(function(){

let button = document.querySelector("button");

button.οnclick=function(){

let time=new Date().getTime()

console.log('button被点击余'+time);

}

})()

/*

1. click300ms 延迟问题

为了兼容移动端：对click惊醒了，如果2次点击在300ms 之内的话就对页面进行放大或者是缩小的操作。

问题的产生：

1. 以前都的网站都是大屏的，为了在移动端能够显示页面，苹果设计了一个双击缩放，点击一次后，在300ms内再次点击就是双击缩放，所以要等待300ms，

效果不错，其他的流量拿起厂家都效仿了。

需要把meta中的这个去掉 content="width=device-width, initial-scale=1.0" 才回产生这个问题 ,默认生成的就是

解决：

1.禁用缩放

缺点：不止禁用了，双击缩放，也禁用了双指移动缩放

2. 更改默认的视口宽度

3. FastClick

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。

FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

4. 通过 touchstart 和 touchend模拟实现

能不能直接用touchstart代替click呢，

答案是不能，使用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元素是一个链接，那此时页面就会意外地跳转。

作者：EdmundChen

链接：https://www.jianshu.com/p/6fd2873183e1

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

*/

一键复制

编辑

Web IDE

原始数据

按行查看

历史