tap事件原理

最新推荐文章于 2024-03-16 17:50:45 发布

转载最新推荐文章于 2024-03-16 17:50:45 发布 · 1.3k 阅读

JavaScript笔记本专栏收录该内容

83 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，其中包含一个粉色背景的div元素。通过JavaScript实现了触摸事件的监听，包括touchstart、touchmove和touchend，用于识别快速点击手势（tap事件）。此实现通过检查两次触摸事件之间的间隔时间和是否发生了移动来判断。

	

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手势事件</title>
    <style>
        .box {
            width: 320px;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <div class="box">

    </div>
    <script>

        window.onload=function () {
            var box=document.querySelector('.box');
            var bindSwipeEvent=function (dom,fn) {
                var startDate=null;
                var bolMove=false;
                dom.addEventListener('touchstart',function (e) {
                    /*开始触摸*/
                    startDate=Date.now();
                });
                dom.addEventListener('touchmove',function (e) {
                    /*触摸移动*/
                    bolMove=true;
                });
                dom.addEventListener('touchend',function (e) {
                   	/* 因为是手指点击，所以速度会快，并且没有触摸的事件产生 */
                    if ((Date.now()-startDate) <150 && !bolMove) {
                        fn && fn.call(this,e)
                    }
                    bolMove=false;
                    startDate=null;
                });

            }
            bindSwipeEvent(box,function (e) {
                console.log("tap事件"+this+e);
            });
        }


    </script>
</body>
</html>