移动端 - touch事件

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

# touch 事件 #

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

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

## 与 `mouth` 事件的区别 ##

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

## 事件点透bug ##

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

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

e.preventDefault()

![这里写图片描述][20180722180452925]

## 阻止默认事件带来的问题 ##

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

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

[20180722175951512]: /images/20220519/b6903003e9594261804fd31596371411.png
[20180722180452925]: /images/20220519/145520352d7d4917bee365b19a7a1a8c.png