js touch事件|极客笔记

js touch事件

随着移动互联网的快速发展，越来越多的网站和应用程序开始注重移动端的用户体验。在移动端上，用户的操作方式与传统的桌面端有很大的区别，其中触摸操作成为主流。而在前端开发中，我们通常会用到 touch 事件来实现对触摸操作的响应。本文将会详细介绍 JavaScript 中的 touch 事件，并给出一些实用的示例代码。

什么是 touch 事件

在我们移动设备上进行触摸操作时，会触发一系列的事件，比如 tap（轻触）、 swipe（滑动）、 pinch（捏合）等。在 JavaScript 中，这些事件被统称为 touch 事件。touch 事件分为以下几种：

touchstart：手指触摸屏幕的时候触发；
touchmove：手指在屏幕上滑动的时候触发；
touchend：手指离开屏幕的时候触发；
touchcancel：触摸被中断的时候触发，比如触摸过程中突然页面被弹出一个 alert。

我们可以通过监听这些事件，来实现对用户触摸操作的响应。

如何使用 touch 事件

在 JavaScript 中，我们可以通过给元素添加事件监听器来实现对 touch 事件的捕捉。比如下面这段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Touch Event Demo</title>
    <style>
        #touch-target {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div id="touch-target"></div>

    <script>
        const touchTarget = document.getElementById('touch-target');

        touchTarget.addEventListener('touchstart', function (e) {
            e.preventDefault();
            console.log('touchstart');
        });

        touchTarget.addEventListener('touchmove', function (e) {
            e.preventDefault();
            console.log('touchmove');
        });

        touchTarget.addEventListener('touchend', function (e) {
            e.preventDefault();
            console.log('touchend');
        });
    </script>
</body>
</html>

在这段代码中，我们创建了一个 div 元素，并给它添加了 touchstart、touchmove 和 touchend 事件监听器。当用户在这个 div 元素上进行触摸操作时，相应的事件将被触发，并在控制台中打印对应的信息。

示例代码解析

首先，我们通过 document.getElementById 方法获取了id 为 touch-target 的div 元素，然后分别对 touchstart、touchmove 和 touchend 事件添加了监听器。在每个监听器内部，我们使用 e.preventDefault() 来阻止默认的事件行为，并通过 console.log 打印出相应的事件信息。

在实际的应用中，我们可以根据需要在事件监听器内部执行自定义的操作，比如改变元素的样式、实现动画效果等。

进阶应用

除了基本的 touch 事件外，我们还可以借助 touch 事件实现一些更复杂的交互效果。比如实现一个简单的拖拽功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop</title>
    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background-color: tomato;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="draggable"></div>

    <script>
        const draggable = document.getElementById('draggable');
        let offsetX = 0;
        let offsetY = 0;

        draggable.addEventListener('touchstart', function (e) {
            e.preventDefault();
            const touch = e.touches[0];
            offsetX = touch.pageX - draggable.offsetLeft;
            offsetY = touch.pageY - draggable.offsetTop;
        });

        draggable.addEventListener('touchmove', function (e) {
            e.preventDefault();
            const touch = e.touches[0];
            draggable.style.left = touch.pageX - offsetX + 'px';
            draggable.style.top = touch.pageY - offsetY + 'px';
        });

        draggable.addEventListener('touchend', function (e) {
            e.preventDefault();
        });
    </script>
</body>
</html>

在这段代码中，我们实现了一个简单的拖拽功能。当用户触摸拖动被指定的 div 元素时，该元素会随着手指的移动而移动。在 touchstart 事件监听器中，我们记录下手指相对于该元素左上角的偏移量，然后在 touchmove 事件监听器中根据手指的位置调整元素的 left 和 top 属性，以实现拖拽的效果。