移动端触屏事件

移动端触屏事件

移动端触屏事件概述

移动端浏览器兼容性较好，我们不需要考虑js的兼容性问题，可以放心使用原生js书写效果，移动端有自己独特的地方。比如触屏touch(触摸事件)，Android和ios都有。touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指对屏幕或者触控板的操作

常见的触屏touch事件:

touchstart   手指触摸到一个Dom元素时触发
touchmove    手指在一个DOM元素上滑动时触发
touchend      手指从一个DOM元素上移开时触发

触摸事件对象(TouchEvent)

TouchEvent是一个描述手指在触摸平面的状态变化的事件，这类事件用于描述一个或多个触摸点，使开发者可以检查触点的移动，触点的增加和减少.

touchstart,touchmove,touchend三个事件都有各自的事件对象

三个常见对象：

touches    正在触摸屏幕的所有手指的一个列表
targetTouches  正在触摸当前DOM元素上的手指的一个列表  【重点】
changedTouches  手指状态发生了改变的列表，从无到有，从有到无变化

移动端拖动元素

touchstart,touchmove,touchend可以实现拖动元素

但是拖动元素需要当前手指的坐标值，我们可以使用targetTouches[0]里面pageX和pageY

移动端拖动的原理:手指移动中，计算出手指移动的距离，然后用盒子原来的位置+手指移动的距离

手指移动的距离：手指滑动中的位置 减去 手指刚开始触摸的位置

拖动元素三步骤：

• 触摸元素touchstart，获取手指初始坐标，同时 获得盒子原来的位置
• 移动手指 touchmove 计算手指的滑动距离，并且移动盒子
• 离开手指 touchend

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

classList属性

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

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

注意:一下方法里面，所有类名都不带点

添加类

element.classList.add('类名')

移除类

element.classList.remove('类名')

切换类

element.classList.toggle('类名')

开关灯案例

  
    
    
    
    
    
  
  
    

    开关灯