移動端常用事件之touch觸摸事件 · PHP筆記

| 觸屏touch事件 | 說明 | | --- | --- | | touchstart | 手指觸摸到一個DOM元素時觸發 | | touchmove | 手指在一個DOM元素上滑動時觸發 | | touchend | 手指從一個DOM元素上移開時觸發 | ``` <body> <div></div> <script> var div = document.querySelector('div'); // 手指觸摸DOM事件 div.addEventListener('touchstart', function () { console.log('別摸我！'); }) // 手指觸摸滑動DOM事件 div.addEventListener('touchmove', function () { console.log('我繼續摸'); }) // 手指觸摸離開DOM事件 div.addEventListener('touchend', function () { console.log('我摸夠了'); }) </script> ``` TouchEvent是一類描述手指在觸摸平面 (觸摸屏、觸摸板等)的狀態變化的事件。這類事件用于描述一個或多個觸點,使開發者可以檢測觸點的移動,觸點的加和減少,等等 touchstart、touchmove、 touchend 三個事件都會各自有事件對象。 | 觸摸列表 | 說明 | | --- | --- | | touches | 正在觸摸屏幕的所有手指的一個列表 | | targetTouches | 正在觸摸當前DOM元素上的手指的一一個列表 | | changedTouches | 手指狀態發生了改變的列表，從無到有，從有到無變化 | ![](https://img.kancloud.cn/2e/49/2e494bd637a2dd23a4b61807d98ad2e1_1429x659.png) **因為平時我們都是給元素注冊觸摸事件,所以常用targetTocuhes** ## 3.TouchEvent觸摸事件對象 ![](https://img.kancloud.cn/18/05/180582e0634a5176488ab8ffa48a9267_1286x309.png) **touches 正在觸摸屏幕的所有于指的列衣，****targetTouches 正在觸摸當前DOM元素的手指列表如果偵聽的是一個DOM元素，他們兩個是一樣的，****changedTouches?手指狀態發生了改變的列表從無到有或者從有到無** ## 4.拖動元素 1.touchstart，touchmove，touchend 可以實現拖動元素 2.但是拖動元素需要當前手指的坐標值我們可以使用targetTouches\[0\] 里面的pageX和pageY 3.拖動的原理:手指移動計算出手指移動的距離，然后用盒子原來的位置+手指移動的距離 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'); // 獲取手指初始坐標和盒子的原來位置 var startX = 0; var startY = 0; // 獲取盒子原來的位置 var x = 0; var y = 0; div.addEventListener('touchstart', function (e) { // 得到初始的手指坐標 startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; // 獲取盒子坐標 x = this.offsetLeft; y = this.offsetTop; }) div.addEventListener('touchmove', function (e) { // 手指的移動距離= 手指移動之后的坐標 - 手指初始的坐標 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> ``` ![](https://img.kancloud.cn/95/0c/950cb0ffca7d4722ce77efc20fccb86b_757x718.gif)