移动端原生事件

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);
});