移动端 - touch事件

矫情吗；* 2022-05-19 07:21 331阅读 0赞

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()

发表评论

表情：
评论列表 （有 0 条评论，331人围观）

还没有评论，来说两句吧...

相关阅读