移动端的touch事件

事件添加方式

//移动端的事件添加使用addEventListener
//第一个参数是事件名称，第二个参数是触发事件之后的回调
var div=document.querySelector("div");
div.addEventListener("事件名称",function(e){
  回调函数;
})

主要触发事件

//touchstart 滑动开始 当手指触碰屏幕时候触发。
dom.addEventListener('touchstart',function(e){
     console.log("touchstart");
        console.log(e);
});

//touchmove：滑动过程 当手指在屏幕上滑动时连续触发。是一个持续监听，持续触发的过程
dom.addEventListener('touchmove',function(e){
       console.log("touchstart");
        console.log(e);
});

//touchend：滑动结束 当手指离开屏幕时触发。
dom.addEventListener('touchend',function(e){
       console.log("touchstart");
        console.log(e);
});

 

返回对象具有的属性

事件返回的e对象包含移动端特有的属性：
   1.targetTouches 目标元素的所有当前触摸
   2.changedTouches 页面上最新更改的所有触摸
   3.touches 页面上的所有触摸

返回对象的坐标值

clientX:触摸目标在当前视口中的X坐标。clientY:触摸目标在当前视口中的Y坐标。

pageX：触摸目标在页面内容中的x坐标。pageY：触摸目标在页面内容中的y坐标。

screenX:触摸目标在屏幕中的x坐标。screenY:触摸目标在屏幕中的y坐标。

 

PageX和clientX

pageX指在页面上的位置，以页面左侧为参考点

clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。

即当有滚动条时clientX  小于  pageX