【移动端】封装一个简单的tap事件鸭

最新推荐文章于 2021-02-28 13:48:18 发布

乌鲁托拉曼

最新推荐文章于 2021-02-28 13:48:18 发布

阅读量519

点赞数 1

分类专栏： HTML+CSS JavaScript学习之路

本文链接：https://blog.csdn.net/lizhengxv/article/details/93537956

版权

JavaScript学习之路同时被 2 个专栏收录

43 篇文章 2 订阅

订阅专栏

HTML+CSS

25 篇文章 1 订阅

订阅专栏

1. tap事件与click事件

移动端click事件缺陷

移动端也有click事件，但是在移动端为了区别是点击还是滑动（当用户触碰到屏幕的时候，可能是点击，也可能是活动），因此click事件有300ms的延迟。这个延迟在chrome浏览器模拟器中体现不到300ms的效果，只有在真机上才有。
响应太慢，影响用户体验

tap事件

tap事件不是移动端原生事件，而是通过touch相关事件衍生（封装）过来的。
tap事件的关键：不触发滑动事件，响应在150ms内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>

<script>

    window.onload = function(){
       var bindTapEvent = function(dom, callback){
           var startTime = 0;
           var isMove = false;

           dom.addEventListener('touchstart', function(){
                startTime = Date.now();
           })

           dom.addEventListener('touchmove', function(){
                isMove = true;
           })

           dom.addEventListener('touchend', function(e){
                var time = Date.now() - startTime;
                if( time < 150 && !isMove ){
                    callback && callback.call(this, e)
                }

                // 初始化状态
                startTime = 0;
                isMove = false;
           })
       }

       bindTapEvent( document.querySelector('.box'), function(e){
           console.log('tap事件')
       } )

    }


</script>

</html>

乌鲁托拉曼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【移动端】封装一个简单的tap事件鸭

1. tap事件与click事件移动端click事件缺陷移动端也有click事件，但是在移动端为了区别是点击还是滑动（当用户触碰到屏幕的时候，可能是点击，也可能是活动），因此click事件有300ms的延迟。这个延迟在chrome浏览器模拟器中体现不到300ms的效果，只有在真机上才有。响应太慢，影响用户体验tap事件tap事件不是移动端原生事件，而是通过touch相关事件衍生（封...
复制链接

扫一扫