1、触屏事件touch
2、触摸事件
TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等
var div = document.querySelector(‘div‘); div.addEventListener(‘touchstart‘, function(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) { // 当我们手指离开屏幕的时候,就没有了 touches 和 targetTouches 列表 // 但是会有 changedTouches });
3、拖动元素
1.touchstart、touchmove、touchend可以实现拖动元素
⒉.但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0]里面的pageX和pageY
3.移动端拖动的原理:手指移动中,计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离
4.手指移动的距离:手指滑动中的位置减去手指刚开始触摸的位置
拖动元素三步曲:
(1)触摸元素touchstart:获取手指初始坐标,同时获得盒子原来的位置
(2)移动手指touchmove :计算手指的滑动距离,并且移动盒子
( 3)离开手指touchend: 这一步视情况可不添加
注意:手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault();
4、移动端click300ms延时
原因:移动端屏幕双击会缩放页面
https://www.jianshu.com/p/6e2b68a93c88
1、禁用缩放 user-scalable = no
2、利用touch封装事件:检测用户触摸时间,触摸和离开的时间小于150ms则算点击,不算缩放
5、fastclick
6、swiper