JavaScript?touch觸摸事件的使用講解

更新時間：2026年01月02日 09:54:32 作者：韓曙亮

這篇文章主要介紹了JavaScript?touch觸摸事件的使用,JavaScript中的觸摸事件對象TouchEvent是處理移動設備觸摸交互的核心接口,承載了觸摸操作的所有相關信息,需要的朋友可以參考下

一、TouchEvent觸摸事件對象

1、TouchEvent概念

JavaScript 中的觸摸事件對象 TouchEvent 是處理移動設備 ( 手機、平板等 ) 觸摸交互的核心接口 ;

觸摸事件對象 TouchEvent 是 DOM 事件接口的一種 , 專門用于表示觸摸設備上的觸點交互事件 , 它承載了觸摸操作的所有相關信息 ( 如觸點位置、數(shù)量、狀態(tài)等 ) , 僅在支持觸摸的設備 ( 移動端設備、帶觸摸屏的桌面設備 ) 上觸發(fā) ;

與普通鼠標事件 ( click、mousemove ) 不同 , TouchEvent 支持多點觸摸 ( 多個手指同時觸摸屏幕 ) , 這是它的核心特性 ;

2、TouchEvent的核心屬性

觸摸事件對象 TouchEvent 包含多個關鍵屬性 , 其中最核心的是三個觸摸列表屬性 , 均為TouchList類型 , 類數(shù)組結構 , 包含多個 Touch 對象 ;

touches 屬性 : 當前屏幕上所有活躍的觸點 ( 無論觸點是否針對當前元素 ) , 比如多手指觸摸時 , 所有手指的觸點都在此列表中 ;

targetTouches 屬性 : 當前綁定事件的元素上的活躍觸點 , 僅包含觸摸在當前元素上的觸點 , 排除其他元素上的觸點 ;

changedTouches 屬性 : 本次事件發(fā)生時狀態(tài)發(fā)生變化的觸點 ;

touchstart : 新增的觸點 ( 剛按下的手指 )
touchmove : 移動的觸點
touchend : 離開屏幕的觸點 ( 抬起的手指 )
touchcancel : 被中斷的觸點

3、單個觸點信息Touch對象

觸摸事件對象 TouchEvent 的 touches、targetTouches 、changedTouches 都是 TouchList 類型 , TouchList 中的每一個元素都是 Touch 對象 , 它表示單個觸摸觸點的詳細信息 ;

Touch對象的常用屬性如下 :

identifier 屬性 : 唯一標識觸點的 ID ( 數(shù)字 ) , 用于區(qū)分多點觸摸中的不同手指 , 避免混淆 ;
target 屬性 : 觸發(fā) 觸摸事件的元素 , 觸點最初接觸的 DOM 元素 ;
clientX / clientY 屬性 : 觸點相對于視口左上角的坐標 , 不包含滾動條偏移 ;
pageX / pageY 屬性 : 觸點相對于文檔左上角的坐標 , 包含滾動條偏移 ;
screenX / screenY 屬性 : 觸點相對于屏幕左上角的坐標 , 設備物理屏幕坐標 ;

4、觸摸事件對象TouchEvent對應的觸摸事件類型

觸摸事件對象 TouchEvent 對應的事件類型主要有 4 種 , 覆蓋觸摸的完整生命周期 :

touchstart 觸摸開始事件 : 當手指首次觸摸到屏幕時觸發(fā) ( 類似鼠標事件mousedown ) ;

        // 1. 綁定觸摸開始事件 ( touchstart )  : 當手指首次觸摸到元素時觸發(fā)
        touchBox.addEventListener('touchstart', (e) => {
        	// e 是 TouchEvent 類型對象
            // 獲取當前發(fā)生變化的觸點列表 ( touchstart時為新增的觸點 ) 
            const touchList = e.changedTouches;
            }
        });

touchmove 觸摸移動事件 : 當手指在屏幕上滑動 ( 移動 ) 時持續(xù)觸發(fā) ( 類似鼠標事件mousemove ) ;

        // 2. 綁定觸摸移動事件 ( touchmove )  : 當手指在元素上滑動移動時持續(xù)觸發(fā)
        touchBox.addEventListener('touchmove', (e) => {
        	// e 是 TouchEvent 類型對象
            // 獲取當前發(fā)生變化的觸點列表 ( touchmove時為正在移動的觸點 ) 
            const touchList = e.changedTouches;
            }
        });

touchend 觸摸結束事件 : 當手指從屏幕上抬起 ( 離開 ) 時觸發(fā) ( 類似鼠標事件mouseup ) ;

        // 3. 綁定觸摸結束事件 ( touchend )  : 當手指從元素上離開 ( 觸摸完成 ) 時觸發(fā)
        touchBox.addEventListener('touchend', (e) => {
        	// e 是 TouchEvent 類型對象
            // 獲取當前發(fā)生變化的觸點列表 ( touchend時為即將離開的觸點 ) 
            const touchList = e.changedTouches;
        });

touchcancel 觸摸取消事件 : 觸摸事件被意外中斷時觸發(fā) ( 如觸摸過程中頁面跳轉(zhuǎn)、彈出系統(tǒng)彈窗、觸摸區(qū)域被隱藏等 )

        // 4. 綁定觸摸中斷事件 ( touchcancel )  : 當觸摸被意外中斷時觸發(fā) ( 如來電、彈窗遮擋等 ) 
        touchBox.addEventListener('touchcancel', (e) => {
        	// e 是 TouchEvent 類型對象
            // 獲取當前發(fā)生變化的觸點列表 ( touchcancel時為被中斷的觸點 ) 
            const touchList = e.changedTouches;
        });

二、代碼示例 - TouchEvent 觸摸事件對象

1、代碼示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TouchEvent 觸摸對象示例</title>
    <style>
        .touchBox {
            /* ID 選擇器 : 選中頁面中 class 屬性值為 " touchBox " 的 HTML 元素 , 開始定義該元素的樣式集合 */
            /* 寬度設置 : 將元素寬度設為其父元素寬度的100% , 實現(xiàn)寬度自適應父容器 */
            width: 100%;
            /* 高度設置 : 給元素設置固定高度為300像素 , 元素高度不會隨內(nèi)容多少自動變化 ( 內(nèi)容超出會溢出 )  */
            height: 200px;
            /* 背景顏色設置 : 為元素設置淺灰色背景 ( 十六進制顏色值#f0f0f0對應淺灰 )  , 填充元素的背景區(qū)域 */
            background-color: #f0f0f0;
            /* 邊框設置 : 簡寫屬性 , 同時設置元素四個方向的邊框 ( 1像素寬、實線樣式、淺灰色#ccc )  , 無需分別定義上下左右邊框 */
            border: 1px solid #ccc;
            /* 外邊距設置 : 簡寫屬性 , 上下外邊距為20像素 , 左右外邊距為0 , 控制元素與其他元素的外部間距 */
            margin: 20px 0;
            /* 內(nèi)邊距設置 : 簡寫屬性 , 四個方向 ( 上、右、下、左 ) 的內(nèi)邊距均為10像素 , 控制元素內(nèi)容與邊框的內(nèi)部間距 */
            padding: 10px;
            /* 結束#touchBox元素的樣式定義 */
        }
        .log {
            /* ID選擇器 : 選中頁面中 class 屬性值為 " log " 的 HTML 元素 , 開始定義該元素的樣式集合 */
            /* 高度設置 : 給元素設置固定高度為200像素 , 限制元素的垂直顯示區(qū)域 */
            height: 300px;
            /* 垂直溢出處理 : 當元素內(nèi)的內(nèi)容高度超過 200 像素時 , 自動顯示垂直滾動條 ; 內(nèi)容未溢出時 , 不顯示滾動條 */
            overflow-y: auto;
            /* 邊框設置 : 簡寫屬性 , 同時設置元素四個方向的邊框 ( 1像素寬、實線樣式、淺灰色#ccc )  , 勾勒元素輪廓 */
            border: 1px solid #ccc;
            /* 內(nèi)邊距設置 : 簡寫屬性 , 四個方向的內(nèi)邊距均為10像素 , 避免內(nèi)容緊貼邊框 , 提升視覺效果 */
            padding: 10px;
            /* 結束 .log 元素的樣式定義 */
        }
    </style>
</head>
<body>
    <div class="touchBox">觸摸我 ( 支持多點觸摸 ) </div>
    <div class="log"></div>
    <script>
        // 通過ID選擇器獲取頁面中 class 為 "touchBox"的 DOM 元素 , 用于綁定觸摸事件
        const touchBox = document.querySelector('.touchBox');
        // 通過ID選擇器獲取頁面中 class 為 " log " 的 DOM 元素 , 用于展示觸摸事件日志信息
        const log = document.querySelector('.log');
        // 日志打印函數(shù) : 負責將觸摸事件信息格式化后添加到日志容器中
        function printLog(content) {
            // 創(chuàng)建當前時間的本地化時間字符串 ( 格式如 : 14:23:45 )  , 用于日志時間戳
            const now = new Date().toLocaleTimeString();
            // 將新日志添加到日志容器頂部 ( 通過拼接 HTML , 新內(nèi)容在前 , 原有內(nèi)容在后 , 
實現(xiàn)換行 ) 
            log.innerHTML = `[${now}] ${content}
` + log.innerHTML;
            // 限制日志條數(shù) : 當日志容器的子元素數(shù)量超過20條時 , 刪除最后一條 ( 最舊的 ) 日志
            if (log.children.length > 20) {
                log.removeChild(log.lastChild);
            }
        }
        // 1. 綁定觸摸開始事件 ( touchstart )  : 當手指首次觸摸到元素時觸發(fā)
        touchBox.addEventListener('touchstart', (e) => {
            // 阻止觸摸事件的默認行為 ( 避免頁面因觸摸產(chǎn)生滾動、縮放等干擾操作 ) 
            e.preventDefault();
            // 獲取當前發(fā)生變化的觸點列表 ( touchstart時為新增的觸點 ) 
            const touchList = e.changedTouches;
            // 遍歷所有變化的觸點 , 逐個打印詳細信息
            for (let i = 0; i < touchList.length; i++) {
                const touch = touchList[i];
                // 打印touchstart事件詳情 : 包含觸點唯一ID、坐標、元素當前觸點數(shù)、屏幕總觸點數(shù)
                printLog(`【touchstart】觸點ID : ${touch.identifier} , 坐標 ( pageX: ${touch.pageX}, pageY: ${touch.pageY} )  , 當前元素觸點數(shù) : ${e.targetTouches.length} , 屏幕總觸點數(shù) : ${e.touches.length}`);
            }
        });
        // 2. 綁定觸摸移動事件 ( touchmove )  : 當手指在元素上滑動移動時持續(xù)觸發(fā)
        touchBox.addEventListener('touchmove', (e) => {
            // 阻止觸摸事件的默認行為 ( 避免滑動時觸發(fā)頁面滾動 ) 
            e.preventDefault();
            // 獲取當前發(fā)生變化的觸點列表 ( touchmove時為正在移動的觸點 ) 
            const touchList = e.changedTouches;
            // 遍歷所有移動的觸點 , 打印實時位置信息
            for (let i = 0; i < touchList.length; i++) {
                const touch = touchList[i];
                // 打印touchmove事件詳情 : 包含觸點唯一ID和實時頁面坐標
                printLog(`【touchmove】觸點ID : ${touch.identifier} , 實時坐標 ( pageX: ${touch.pageX}, pageY: ${touch.pageY} ) `);
            }
        });
        // 3. 綁定觸摸結束事件 ( touchend )  : 當手指從元素上離開 ( 觸摸完成 ) 時觸發(fā)
        touchBox.addEventListener('touchend', (e) => {
            // 阻止觸摸事件的默認行為 ( 避免后續(xù)默認操作干擾 ) 
            e.preventDefault();
            // 獲取當前發(fā)生變化的觸點列表 ( touchend時為即將離開的觸點 ) 
            const touchList = e.changedTouches;
            // 遍歷所有即將離開的觸點 , 打印離開時的信息
            for (let i = 0; i < touchList.length; i++) {
                const touch = touchList[i];
                // 打印touchend事件詳情 : 包含觸點唯一ID、離開坐標、元素剩余觸點數(shù)、屏幕總觸點數(shù)
                printLog(`【touchend】觸點ID : ${touch.identifier} , 離開坐標 ( pageX: ${touch.pageX}, pageY: ${touch.pageY} )  , 剩余元素觸點數(shù) : ${e.targetTouches.length} , 屏幕總觸點數(shù) : ${e.touches.length}`);
            }
        });
        // 4. 綁定觸摸中斷事件 ( touchcancel )  : 當觸摸被意外中斷時觸發(fā) ( 如來電、彈窗遮擋等 ) 
        touchBox.addEventListener('touchcancel', (e) => {
            // 阻止觸摸事件的默認行為
            e.preventDefault();
            // 獲取當前發(fā)生變化的觸點列表 ( touchcancel時為被中斷的觸點 ) 
            const touchList = e.changedTouches;
            // 遍歷所有被中斷的觸點 , 打印中斷信息
            for (let i = 0; i < touchList.length; i++) {
                const touch = touchList[i];
                // 打印touchcancel事件詳情 : 包含觸點唯一ID和中斷提示
                printLog(`【touchcancel】觸點ID : ${touch.identifier} , 被中斷`);
            }
        });
    </script>
</body>
</html>