click300ms点击问题和点击穿透

最新推荐文章于 2021-05-18 15:26:37 发布

蚁族的奋斗1

最新推荐文章于 2021-05-18 15:26:37 发布

阅读量229

点赞数

分类专栏：移动端 css

本文链接：https://blog.csdn.net/github_39319000/article/details/74938789

版权

css 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

移动端

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" >
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button>点我</button>
</body>
<script>
    (function(){
        let  button = document.querySelector("button");
        button.onclick=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" 才回产生这个问题  ,默认生成的就是 <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        解决：
            1.禁用缩放
                <meta name="viewport" content="user-scalable=no">
                <meta name="viewport" content="initial-scale=1,maximum-scale=1">

                缺点：不止禁用了，双击缩放，也禁用了双指移动缩放
            2. 更改默认的视口宽度
                <meta name="viewport" content="width=device-width">
            
            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
                来源：简书
                著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
    
     */
</script>
</html>

蚁族的奋斗1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
click300ms点击问题和点击穿透

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">  <!-- ...
复制链接

扫一扫