移动端事件 pc端事件在移动端延迟300ms触发、移动端事件对象、touch.js、绑定方式、事件对象、 手势事件 20

day20 移动端事件

回顾事件：

• 鼠标事件：onclick，onmouseover，onmouseout（冒泡，子元素可以触发父元素事件）,onmouseenter,onmouseleave(不冒泡，子元素不能触发父元素事件)，onmousemove,onmouseup,onmousedown,
• 滚轮事件： onmousewheel DOMMoseScroll
• 滚动事件：onscroll
• 窗口大小发生改变时触发的事件：onresize
• 表单事件：
  • 表单域：onsubmit，onreset
  • 表单事件：onfocus，onblur，oninput/onpropertychange，onchange
• 键盘事件：onkeydown，onkeyup，onkeypress
• window.onload : 等文档和资源都加载完成后调用

1.原生移动端事件

1.1 移动端原生事件

• touchstart ： 手指按下

• touchmove：手指一动

• touchend：手指离开

• 注意：使用事件绑定的方式添加移动端事件

  //1.添加移动端事件
  oDiv.addEventListener("touchstart",function(){
      console.log("手指按下");
  });
  oDiv.addEventListener("touchmove",function(){
      console.log("手指移动");
  });
  oDiv.addEventListener("touchend",function(){
      console.log("手指离开");
  })
  

1.2 pc端事件在移动端延迟300ms触发

//1.添加移动端事件
//pc端事件在移动端触发会慢 300ms
oDiv.addEventListener("touchend",function(){
    console.log("end"+Date.now());
});
oDiv.addEventListener("mouseup",function(){
    console.log("aup"+Date.now());
});

点透问题：

<a href="https://www.baihe.com/">百合网</a>
<div></div>

//点透事件  点击div隐藏后能够点击到下面有连接的a标签，进行跳转
//touchend事件发生的时候，其实也会触发touchstart,click，只不过没有添加事件就没有事件处理而已
//touchend ： 隐藏div
//click : 慢了一点点发生，当时的div已经消失，隐藏就点击到了a链接进行了跳转

//解决：div延迟300ms消失
//1.点击div，隐藏div
oDiv.addEventListener("touchend",function(){
    setTimeout(function(){
        oDiv.style.display = "none";
    },300)
})

1.3 移动端事件对象

 //1.添加移动端事件
oDiv.addEventListener("touchstart",function(ev){
    var ev = window.event || ev;
    console.log(ev.touches); //位于屏幕上的手指列表
    console.log(ev.targetTouches); //位于当前元素上的手指列表
    console.log(ev.changedTouches); //事件相关的手指列表信息

    var touch = ev.changedTouches[0];
    console.log(touch.clientX); //鼠标位置
    console.log(touch.clientY);
});

2.touch.js

2.1 绑定方式

• 普通绑定：touch.on(element,types,callback)

• 代理绑定：touch.on(element,types，childrenSelector,callback)

  • this ---- 触发事件的子元素

  //语法：touch.on(element,types,callback)
  var oDiv = document.querySelector("div");
  touch.on(oDiv,"tap doubletap",function(){
      console.log("单击");
  });
  

  //语法：事件代理的绑定：touch.on(element,types,childrenSelector,callback)
  touch.on("ul","tap","li",function(){
      console.log(this); //this---触发事件的子元素
      this.style.background = "pink";
  })
  

2.2 事件对象

//2.添加touchjs的手势事件
touch.on("div","swipe",function(ev){ //touchjs已经处理好了ev的兼容
    console.log(ev); //touchjs处理好的，自定义的事件对象
    console.log(ev.originEvent); //原生事件对象

    //缩放类使用属性
    console.log(ev.scale); //缩放比例

    //旋转类使用的属性
    console.log(ev.rotation); //旋转角度  顺时针： 正        逆时针：负


    //滑动类、拖拽类使用的属性
    console.log(ev.direction); //方向  up down left right
    console.log(ev.distance);  //滑动距离  具体的数值 正
    console.log(ev.distanceX); //水平方向的移动距离  往左：负   往右： 正
    console.log(ev.distanceY); //垂直方向的移动距离  往上：负   往下： 正

    console.log(ev.position); //鼠标位置 {x:10,y:20}
});

2.3 手势事件

• 点击类

  • tap：单击
  • doubletap：双击
  • hold：长按

  touch.on("div","touchstart",function(ev){
      ev.preventDefault();
  })
  touch.on("div","doubletap",function(){
      console.log("双击");
  });
  
  touch.on("div","hold",function(){
      console.log("长按");
  })
  
  

• 旋转类

  • rotateleft：左旋转

  • rotateright：右旋转

  • rotate：旋转

  • 注意：要开启旋转事件，touchstart里面， ev.startRotate()

  • 用到的属性：旋转角度 ev.rotation

    //2.取消默认行为
    touch.on(oDiv,"touchstart",function(ev){
        ev.preventDefault();
        ev.startRotate();
    })
    
    //3.添加旋转事件
    touch.on(oDiv,"rotate",function(ev){
        //获取旋转角度
        console.log(ev.rotation);
        oImg.style.transform = "rotate("+ev.rotation+"deg)";
    })
    
    

• 滑动类

  • swipestart：滑动起点
  • swiping：滑动中
  • swipeend：滑动终点
  • swipe：滑动
  • swipeleft：左滑
  • swipeleft：左滑
  • swipeleft：左滑
  • swipeleft：左滑
  • 用到的属性
    • 滑动方向：ev.direction
    • 滑动距离：ev.distance ev.distanceX ev.distanceY

  //3.添加事件
  touch.on(oDiv,"swipe",function(ev){
      console.log(ev.direction);    //滑动方向
      console.log(ev.distance); //滑动距离
      console.log(ev.distanceX);
      console.log(ev.distanceY);
      
      oImg.style.transform = "translateY("+ev.distanceY+"px)";
  });
  
  

• 拖拽类

  • dragstart：拖拽开始
  • drag：拖拽
  • dragend：拖拽结束

  //3.添加事件
  touch.on(oDiv,"drag",function(ev){
      console.log(ev.direction);    //滑动方向
      console.log(ev.distance); //滑动距离
      console.log(ev.distanceX);
      console.log(ev.distanceY);
  
      oImg.style.transform = "translateY("+ev.distanceY+"px)";
  });