移动端基础事件总结与应用

1.触摸事件touch

    touchstart      手指放在屏幕上触发

    touchmove    手指在屏幕上移动，连续触发

    touchend       手指离开屏幕触发

    touchcancel   当系统停止跟踪时触发，该事件暂时用不到

注意：

  1.移动端只能事件只能通过监听函数添加，不能用on添加

  2.移动端当中就不要用鼠标的事件

  3.移动端的事件会触发浏览器的默认行为，所以在调用事件的时候要把默认行为阻止了ev.preventDefault。

demo:

document.addEventListener('touchstart',function(ev){ ev.preventDefault();});var box=document.getElementById("box");box.addEventListener('touchstart',function(){ this.innerHTML='手指按下了';});box.addEventListener('touchmove',function(){ this.innerHTML='手指移动了';});box.addEventListener('touchend',function(){ this.innerHTML='手指离开了';});

2.touch事件对象

   ev.touches                 当前屏幕的手指列表

   ev.targetTouches      当前元素上的手指列表

   ev.changedTouches  触发当前事件的手指列表

   每个touch对象都包含了以下几个属性（打印ev.touches如下）：

       clientX  //触摸目标在视口中的X坐标。

       clientY  //触摸目标在视口中的Y坐标。

       Identifier   //标示触摸的唯一ID。

       pageX  //触摸目标在页面中的X坐标。

       pageY  //触摸目标在页面中的Y坐标。

       screenX//触摸目标在屏幕中的X坐标。

       screenY //触摸目标在屏幕中的Y坐标。

       target // 触摸的DOM节点目标。

demo:

var box=document.getElementById("box");//相当于mousedownbox.addEventListener('touchstart',function(ev){ //console.log(ev.touches); this.innerHTML=ev.touches.length;//按下手指数});

3.设备加速度事件devicemotion

  devicemotion    封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

  其中加速度的数据包含以下三个方向：

   x：横向贯穿手机屏幕；

   y：纵向贯穿手机屏幕；

   z：垂直手机屏幕

鉴于有些设备没有排除重力的影响，所以该事件会返回两个属性：