JS滑动事件|极客笔记

JS滑动事件

在网页开发中，滑动事件是一类非常常用的事件之一。通过监听滑动事件，可以实现一些有趣的交互效果，比如实现下拉刷新、上拉加载更多等功能。本文将详细介绍JS中的滑动事件，包括滑动事件的类型、如何监听和处理滑动事件等内容。

滑动事件类型

在JavaScript中，滑动事件可以分为以下几种类型：

touchstart：手指触摸屏幕时触发的事件。
touchmove：手指在屏幕上滑动时触发的事件。
touchend：手指离开屏幕时触发的事件。
touchcancel：触摸事件被中止时触发的事件。

这些事件可以用于监听用户在移动设备上进行的触摸操作，实现相应的交互效果。

监听滑动事件

要监听滑动事件，可以通过addEventListener方法将事件处理函数绑定到相应的元素上。以下是一个简单的示例，演示了如何监听touchstart和touchend事件：

let box = document.getElementById('box');

box.addEventListener('touchstart', function(e) {
    console.log('Touch started');
});

box.addEventListener('touchend', function(e) {
    console.log('Touch ended');
});

在这个示例中，当用户触摸id为box的DOM元素时，会分别打印出Touch started和Touch ended。

获取滑动坐标

在滑动事件处理函数中，可以通过Touch对象的clientX和clientY属性获取触摸点相对于浏览器窗口的坐标。以下是一个示例，演示了如何获取滑动的起始坐标和结束坐标：

let startX, startY, endX, endY;
box.addEventListener('touchstart', function(e) {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
});

box.addEventListener('touchend', function(e) {
    endX = e.changedTouches[0].clientX;
    endY = e.changedTouches[0].clientY;
    let distanceX = endX - startX;
    let distanceY = endY - startY;
    console.log('X轴滑动距离：', distanceX);
    console.log('Y轴滑动距离：', distanceY);
});

在这个示例中，我们利用touches和changedTouches属性获取了触摸点的坐标，并计算出了滑动的距离。

实现滑动效果

利用滑动事件，我们可以实现一些有趣的效果。比如下面这个示例演示了一个简单的左右滑动切换页面的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动切换页面</title>
    <style>
        .page {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
        }
        .page1 {
            background-color: #f00;
        }
        .page2 {
            background-color: #0f0;
        }
        .page3 {
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div class="page page1">Page 1</div>
    <div class="page page2">Page 2</div>
    <div class="page page3">Page 3</div>

    <script>
        let pages = document.querySelectorAll('.page');
        let currentPage = 0;

        document.addEventListener('touchstart', function(e) {
            startX = e.touches[0].clientX;
        });

        document.addEventListener('touchend', function(e) {
            endX = e.changedTouches[0].clientX;
            let distanceX = endX - startX;

            if (distanceX > 50) {
                currentPage = currentPage === 0 ? 2 : currentPage - 1;
            } else if (distanceX < -50) {
                currentPage = currentPage === 2 ? 0 : currentPage + 1;
            }

            pages.forEach((page, index) => {
                if (index === currentPage) {
                    page.style.display = 'flex';
                } else {
                    page.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>

在这个示例中，我们通过监听触摸事件，并根据触摸的滑动距离切换不同的页面。用户可以左右滑动屏幕，切换不同的页面内容。

通过上面的示例，我们可以看到滑动事件的用法和实际应用。