快捷導(dǎo)航

JavaScript移動端常用事件之touch觸摸事件詳解

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

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

前言

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

1.觸摸事件

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

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

2.觸屏事件

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

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

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

3.TouchEvent觸摸事件對象

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

4.拖動元素

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

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

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

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

<!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) {
            // 手指的移動距離= 手指移動之后的坐標(biāo) - 手指初始的坐標(biāo)
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            // 移動盒子，盒子原來的位置+手指移動的距離
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            // 阻止屏幕滾動行為
            e.preventDefault();
        })
    </script>
</body>
 
</html>