快捷導(dǎo)航

JavaScript移動(dòng)端常用事件之touch觸摸事件詳解

更新時(shí)間：2022年10月10日 10:42:43 作者：Aic山魚

觸屏事件touch也稱為觸摸事件,touch對(duì)象代表一個(gè)觸摸點(diǎn),觸摸點(diǎn)可能是一根手指,也可能是一根觸摸筆,觸屏事件可響應(yīng)用戶手指(或觸摸筆)對(duì)屏幕或者觸控板操作,下面這篇文章主要給大家介紹了關(guān)于JavaScript移動(dòng)端常用事件之touch觸摸事件的相關(guān)資料,需要的朋友可以參考下

前言

移動(dòng)端瀏覽器兼容性較好，不需要考慮JS的兼容性問題，可以放心的使用原生JS書寫效果，但是移動(dòng)端也有自己獨(dú)特的地方。如觸屏事件touch (也稱觸摸事件) ， Android和IOS都有。

1.觸摸事件

觸屏touch事件	說明
touchstart	手指觸摸到一個(gè)DOM元素時(shí)觸發(fā)
touchmove	手指在一個(gè)DOM元素上滑動(dòng)時(shí)觸發(fā)
touchend	手指從一個(gè)DOM元素上移開時(shí)觸發(fā)

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        // 手指觸摸DOM事件
        div.addEventListener('touchstart', function () {
            console.log('別摸我！');
        })
        // 手指觸摸滑動(dòng)DOM事件
        div.addEventListener('touchmove', function () {
            console.log('我繼續(xù)摸');
        })
        // 手指觸摸離開DOM事件
        div.addEventListener('touchend', function () {
            console.log('我摸夠了');
        })
 
    </script>

2.觸屏事件

TouchEvent是一類描述手指在觸摸平面 (觸摸屏、觸摸板等)的狀態(tài)變化的事件。這類事件用于描述一個(gè)或多個(gè)觸點(diǎn),使開發(fā)者可以檢測(cè)觸點(diǎn)的移動(dòng),觸點(diǎn)的加和減少,等等 touchstart、touchmove、 touchend 三個(gè)事件都會(huì)各自有事件對(duì)象。

觸摸列表	說明
touches	正在觸摸屏幕的所有手指的一個(gè)列表
targetTouches	正在觸摸當(dāng)前DOM元素上的手指的一一個(gè)列表
changedTouches	手指狀態(tài)發(fā)生了改變的列表，從無到有，從有到無變化

因?yàn)槠綍r(shí)我們都是給元素注冊(cè)觸摸事件,所以常用targetTocuhes

3.TouchEvent觸摸事件對(duì)象

touches 正在觸摸屏幕的所有于指的列衣，targetTouches 正在觸摸當(dāng)前DOM元素的手指列表如果偵聽的是一個(gè)DOM元素，他們兩個(gè)是一樣的，changedTouches 手指狀態(tài)發(fā)生了改變的列表從無到有或者從有到無

4.拖動(dòng)元素

1.touchstart，touchmove，touchend 可以實(shí)現(xiàn)拖動(dòng)元素

2.但是拖動(dòng)元素需要當(dāng)前手指的坐標(biāo)值我們可以使用targetTouches[0] 里面的pageX和pageY

3.拖動(dòng)的原理:手指移動(dòng)計(jì)算出手指移動(dòng)的距離，然后用盒子原來的位置+手指移動(dòng)的距離

4.手指移動(dòng)的距離 = 手指滑動(dòng)中的位置 - 手指剛開始觸摸的位置

<!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>
        body {
            margin: 0;
            padding: 0;
        }
 
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: plum;
        }
    </style>
</head>
 
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        // 獲取手指初始坐標(biāo)和盒子的原來位置
        var startX = 0;
        var startY = 0;
        // 獲取盒子原來的位置
        var x = 0;
        var y = 0;
        div.addEventListener('touchstart', function (e) {
            // 得到初始的手指坐標(biāo)
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            // 獲取盒子坐標(biāo)
            x = this.offsetLeft;
            y = this.offsetTop;
        })
        div.addEventListener('touchmove', function (e) {
            // 手指的移動(dòng)距離= 手指移動(dòng)之后的坐標(biāo) - 手指初始的坐標(biāo)
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            // 移動(dòng)盒子，盒子原來的位置+手指移動(dòng)的距離
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            // 阻止屏幕滾動(dòng)行為
            e.preventDefault();
        })
    </script>
</body>
 
</html>