快捷導(dǎo)航

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

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

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

一、TouchEvent觸摸事件對象

1、TouchEvent概念

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

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

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

2、TouchEvent的核心屬性

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

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

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

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

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

3、單個觸點信息Touch對象

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

Touch對象的常用屬性如下 :

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

4、觸摸事件對象TouchEvent對應(yīng)的觸摸事件類型

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

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

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

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

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

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

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

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

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