TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等
touchstart,touchmove,touchend三个事件都会各自有事件对象
触摸事件对象重点我们看三个常见对象列表:
| 触屏touch事件 | 说明 |
| — | — |
| touches | 正在触摸的所有手指的一个列表 |
| targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
| changesTouches | 手指状态发生了改变的列表,从无到有,从有到无变化 |
touches和targetTouches 如果侦听的是一个DOM元素,那么他们返回的结果相同
div.addEventListener(‘touchstart’,function(e) {
console.log(e.targetTouches[0]);
如上段代码targetTouches[0]就可以得到正在触摸dom元素的第一个手指的相关信息,比如手指的坐标等等
========================================================================
1.touchstart. touchmove.touchend可以实现拖动元素
2.但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0]里面的pageX和pageY
3.移动端拖动的原理:手指移动中,计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离
4.手指移动的距离:手指滑动中的位置减去手指刚开始触摸的位置
**拖动元素三部曲:
1.触摸元素touchstart :获取手指初始坐标,同时获得盒子原来的位置
2.移动手指touchmove : 计算手指的滑动距离,并且移动盒子
3.离开手指touchend:**
注意:手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefaultO;
========================================================================
实现效果:
注意浏览器打开后需要点击模拟移动端的按钮才能实现
示例代码: