26、觸屏事件
1. 觸屏事件概述
移動端浏覽器相容性較好，我們不需要考慮以前 JS 的相容性問題，可以放心的使用原生 JS 書寫效果，但是移動端也有自己獨特的地方。比如觸屏事件 touch（也稱觸摸事件），Android和 IOS 都有。
touch 對象代表一個觸摸點。觸摸點可能是一根手指，也可能是一根觸摸筆。觸屏事件可響應使用者手指（或觸控筆）對螢幕或者觸控闆操作。
常見的觸屏事件如下：
<body>
<div></div>
<script>
// 1. 手指觸摸DOM元素事件
var div = document.querySelector('div');
div.addEventListener('touchstart', function() {
console.log('我摸了你');
});
// 2. 手指在DOM元素身上移動事件
div.addEventListener('touchmove', function() {
console.log('我繼續摸');
});
// 3. 手指離開DOM元素事件
div.addEventListener('touchend', function() {
console.log('輕輕的我走了');
});
</script>
</body>
2. 觸摸事件對象（TouchEvent）
TouchEvent 是一類描述手指在觸摸平面（觸摸屏、觸摸闆等）的狀态變化的事件。這類事件用于描述一個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等
touchstart、touchmove、touchend 三個事件都會各自有事件對象。
觸摸事件對象重點我們看三個常見對象清單：
因為平時我們都是給元素注冊觸摸事件，是以重點記住 targetTocuhes
<body>
<div></div>
<script>
// 觸摸事件對象
// 1. 擷取元素
// 2. 手指觸摸DOM元素事件
var div = document.querySelector('div');
div.addEventListener('touchstart', function(e) {
// console.log(e);
// touches 正在觸摸螢幕的所有手指的清單
// targetTouches 正在觸摸目前DOM元素的手指清單
// 如果偵聽的是一個DOM元素，他們兩個是一樣的
// changedTouches 手指狀态發生了改變的清單 從無到有 或者 從有到無
// 一般都是觸摸元素 經常使用的是 targetTouches
console.log(e.targetTouches[0]);
// targetTouches[0] 就可以得到正在觸摸dom元素的第一個手指的相關資訊比如 手指的坐标等等
});
// 3. 手指在DOM元素身上移動事件
div.addEventListener('touchmove', function() {
});
// 4. 手指離開DOM元素事件
div.addEventListener('touchend', function(e) {
// console.log(e);
// 當手指離開螢幕的時候，就沒有了 touches 和 targetTouches 清單
// 但是會有 changedTouches
});
</script>
</body
3. 案例：移動端拖動元素
- touchstart、touchmove、touchend可以實作拖動元素
- 但是拖動元素需要目前手指的坐标值 我們可以使用 targetTouches[0] 裡面的pageX 和 pageY
- 移動端拖動的原理：手指移動中，計算出手指移動的距離。然後用盒子原來的位置 + 手指移動的距離
-
手指移動的距離：手指滑動中的位置 減去 手指剛開始觸摸的位置
拖動元素三步曲：
（1） 觸摸元素 touchstart： 擷取手指初始坐标，同時獲得盒子原來的位置
（2） 移動手指 touchmove： 計算手指的滑動距離，并且移動盒子
（3） 離開手指 touchend:
注意： 手指移動也會觸發滾動螢幕是以這裡要阻止預設的螢幕滾動 e.preventDefault();
<body>
<div></div>
<script>
// （1） 觸摸元素 touchstart：擷取手指初始坐标，同時獲得盒子原來的位置
// （2） 移動手指 touchmove：計算手指的滑動距離，并且移動盒子
// （3） 離開手指 touchend:
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>
1.3.1. 案例：傳回頂部
當頁面滾動某個地方，就顯示，否則隐藏
點選可以傳回頂部
1.3.2.案例分析
- 滾動某個地方顯示
- 事件：scroll頁面滾動事件
- 如果被卷去的頭部（window.pageYOffset ）大于某個數值
- 點選，window.scroll(0,0) 傳回頂部