touch--------移动端的一组触摸事件

• 1. touchstart 当手指触摸屏幕时触发
• 2. touchmove 当手指触摸屏幕来回滑动时触发
• 3. touchend 当手指离开屏幕时触发
• 使用touch:
• 绑定事件 box.addEventListener(“touchstart”, callback)
• 事件对象:

•       changedTouches 改变后触摸点的集合---每个时间点都会记录
  

•       targetTouches  目标元素触摸点的集合---离开屏幕时无法记录
  

•       touches  页面上所有触摸点的集合---离开屏幕时无法记录
  

• 分析滑动实现的原理

•   ①让触摸的元素随着滑动做位置的改变
  

•   ②位置的改变, 需要当前手指的坐标
  

•   ③touches里面一系列的坐标
  

 var box = document.querySelector(".box");
    box.addEventListener("touchstart", function (e) {
        console.log("start");
        console.log(e.touches[0].clientX);//获得触摸点离手机屏幕左边的横坐标
    })
    box.addEventListener("touchmove", function (e) {
        console.log("move");
        console.log(e);
        console.log(e.touches[0].clientX);//获得触摸点离手机屏幕左边的横坐标
    })
    box.addEventListener("touchend", function (e) {
        console.log("end");
        console.log(e);
    })