4.移动端事件 2019-2-15 (未完成)

移动端三大事件:

  1.ontouchstart  手指按下

  2.ontouchmove  手指移动

  3.ontouchend 手指抬起

  在使用浏览器调试的时候,容易出现事件丢失,但是在真机上运行是好的,所以建议使用事件绑定 xxx.addEventListener('touchstart',()=>{ })

  pc 事件(比如:click)延迟是在 300毫秒左右*

  手机端为了能够判断用户是否双击缩放,刻意通过监控用户是否在300ms之内连续点击屏幕2次,所以 click 有300ms延迟

移动端事件 按下 和 移动 和 抬起 是一套的,在按下的时候此时焦点就为按下的元素,抬起的时候自动触发(按下时的)元素

所以移动端不需要嵌套事件使用。

事件点透:

  一个元素下有个焦点元素(比如:a、input ...),在300ms之内让上层元素消失或者漂移,这个时候手机会记录下按下的位置并且进行监听(是否触发了两次),

  因为要监听是否双击,所以它在第一次按下的时候记录(捕捉)到了坐标,如果正好这个坐标下有焦点元素,此时就会触发焦点元素。

解决:

  1.在上层元素消失的时候延迟执行(用户体验不好、兼容性不太好)

  2.不使用焦点元素(对SEO搜索引擎不太好)

  3.在全局阻止 touchend 默认行为,

原文地址:https://www.cnblogs.com/MrZhujl/p/10381886.html