点我
(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
原始数据
按行查看
历史