移动端 - touch事件

touch 事件

在模拟器下不支持用on的方式来给元素加touch事件，推荐用addEventListener方式

• touchstart
  手指触碰元素
• touchmove
  手指触碰元素之后，在屏幕中进行移动
• touchend 手指弹起
  手指触碰元素之后，在屏幕中抬起

与 mouth 事件的区别

mouse事件的触发必须在元素范围内，且在移动端会有300ms左右的延迟

事件点透bug

在移动端，触碰一个元素时，会立即执行添加在元素上的touch事件，然后记录坐标，300ms之后在这个坐标点查找元素，如果找到元素有mouse事件，就执行加在元素的mouse事件

• 解决方案，给元素清除默认事件

e.preventDefault()

阻止默认事件带来的问题

新版的chrome下，不支持直接给document / body的 touch 事件，阻止默认事件

• 解决 IOS10+ safari 以及部分安卓浏览器 不再支持 viewport的最大缩放值和禁止缩放的问题
• 解决 IOS10+ safari 下给body加overflow: hidden无效的问题
  给元素加了一个绝对定位，但是元素本身没有定位父级，元素如果超出了body的宽度，body上的overflow对这个元素，不起效果
  解决方案：给body加上相对定位
• 解决事件点透的问题
• 禁止mouse事件执行
• 阻止浏览器的回弹效果
• 阻止触发流量器的滚动条
• 阻止触发系统菜单阻止图片文字被选中
• 阻止图片文字被选中
• 阻止input的输入
  解决方案：阻止冒泡事件 stopPropagation()