1. 觸屏事件
1.1 觸屏事件概述
- 移動端瀏覽器兼容性較好，不需要考慮 JS 的兼容性問題，但是移動端也有自己獨特的地方，比如觸屏事件
touch（觸摸事件），Android 和 IOS 都有 touch物件代表一個觸摸點，觸摸點可能是一根手指，也可能是一根觸摸筆- 觸屏事件可回應用戶手指（或觸控筆）對螢屏或者觸控板操作
常見的觸屏事件：
1.2 觸摸事件物件（TouchEvent）
TouchEvent是一類描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態變化的事件，這類事件用于描述一個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等，
touchstart、touchmove、touchend三個事件都會各自有事件物件，
三個常見物件串列：
1.3 移動端拖動元素
touchstart、touchmove、touchend可以實作拖動元素- 但是拖動元素需要當前手指的坐標值，可以使用
targetTouches[0]里面的pageX和pageY - 移動端拖動的原理：手指移動中，計算出手指移動的距離，然后用盒子原來的位置 + 手指移動的距離
- 手指移動的距離：手指滑動中的位置 - 手指剛開始觸摸的位置
拖動元素三步曲：
- 觸摸元素
touchstart： 獲取手指初始坐標，同時獲得盒子原來的位置 - 移動手指
touchmove： 計算手指的滑動距離，并且移動盒子 - 離開手指
touchend：
注意： 手指移動也會觸發滾動螢屏，所以要阻止默認的螢屏滾動e.preventDefault();
2. 移動端常見特效
[移動端輪播圖]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/185479.html
標籤：其他
下一篇：jquery坐標值操作