js在移动端的使用

目录

一、touch触摸事件

二、触摸事件对象TouchEvent

三、拖动元素

四、移动端特效

---

一、touch触摸事件

touchstart   手指触摸到一个DOM元素时触发

touchmove   手指在一个DOM元素上滑动时触发

touchend     手指从一个DOM元素上移开时触发

二、触摸事件对象TouchEvent

touches   正在触摸屏幕的所有手指的一个列表

targetTouches  正在触摸当前DOM元素上的手指的一个列表

changeTouches  手指状态发生改变的列表，从无到有，从有到无变化

三、拖动元素

          手指移动时，计算手指的移动的距离，然后盒子原来的位置+手指移动的距离

拖动元素三步曲：

1. 触摸元素touchstart:获取手指的初始坐标targetTouches[0]  (pageX,pageY)，同时获得盒子原来的位置
2. 移动手指touchmove:计算手指的滑动距离，并且移动盒子
3. 离开盒子touchend

targetTouches[0]是指第一个手指

注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault()

四、移动端特效

注意，我们判断条件要等到图片滚动完毕再去判断，就是过渡完成后判断

检测过渡完成事件 transitionend

classList属性是html5新增的属性，返回元素的类名，但是ie10以上版本支持

该属性用于元素中添加，移除及切换css类

classList.add(‘类名’)   添加  不会覆盖之前的

classList.remove(‘类名’)   移除

classList.toggle(‘类名’)   自动切换

click事件300ms延时问题   原因是移动端屏幕双击会缩放页面

1.禁用缩放，浏览器禁用默认的双击默认行为并且去掉300ms的点击延迟

<meta name=”viewport” content=”user-scalable=no”>

2.利用touch事件自己封装这个事件解决300ms延迟

        原理：     ①当我们手指触摸屏幕，记录当前的触摸时间

                        ②当我们手指离开屏幕，用离开的时间减去触摸的时间

                        ③如果时间小于150ms,并且没有滑动过屏幕，那么我们就定义为点击

3.利用fastclick插件

【轮播图】和【回到顶部 】    代码获取：点击可跳到仓库

---

移动端常见插件

 swiper插件

Touchslide插件

iscroll插件

zy.media.js 视频插件