移动端touch事件相关注意事项什么时候touchmove不会触发 touchstart事件已触发，然后evt.tar

注意事项

什么时候touchmove不会触发

touchstart事件已触发，然后evt.target对应元素被删除，此时再滑动屏幕不会触发touchmove
touchstart中没有进行evt.preventDefault()，可能导致touchmove不会连续触发

什么时候touchend不会触发

1.touchstart事件已触发，然后evt.target对应元素被删除，此时再滑动屏幕不会触发touchend 2.touchmove事件已触发，然后evt.target对应元素被删除，此时再滑动屏幕不会触发touchend 3.ios的其他系统级UI事件（非浏览器的UI事件：如滑动触发的控制中心），此时不会触发touchend

下拉刷新实现注意事项：

多指触碰的情况下，只监听固定的单个指头滑动事件即可
尽量不要在touchend中触发刷新逻辑，因为touchend事件有可能无法触发
直接通过touchmove事件，实现下拉刷新，在最大滑动范围内滑动，则提示准备刷新，超过了最大滑动范围，则直接刷新
注意要禁用IOS浏览器本身的下拉刷新(禁用body的overflow效果，给实际的dom元素设置overflow效果) 5.通过touchmove限制可滚动元素的最大下拉距离，避免橡皮筋效果造成的阈值白边卡顿，当接小于等于ios的刷新滑动阈值-1时，直接刷新数据并将scrollTop设置为0，避免IOS浏览器的刷新
下拉刷新实现逻辑参考：(81条消息) Vue实现下拉刷新组件（简单明了）_vue 下拉刷新但内容可以不动的组件_别来无恙``的博客-CSDN博客

关于禁用IOS浏览器自带的下拉刷新

将body的overflow设置为hidden即可

关于禁用IOS的橡皮筋效果

不要这样：如果存在滚动元素的话，这会导致整个界面无法滚动（仅适用于无滚动容器的界面，禁用橡皮筋效果）

document.body.addEventListener('touchmove', function (e) { e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果) }, {passive: false}); //passive 参数不能省略，用来兼容ios和android

类似1的变种方式，也不要采用。网上很多文章都是这类解决方案，但实际不可行，无法完全禁用橡皮筋效果 (81条消息) 解决iOS 上拉边界下拉出现白色空白_overflow: auto; 白屏_前端精髓的博客-CSDN博客

document.body.addEventListener('touchmove', (e)=>{
 if(e._isScroller) return;
 e.preventDefault();
}, {
    passive: false
});

function ontouchmove(e){
e._isScroller=true
}
<div @touchmove="ontouchmove"></div>

如果时ios的webview可参考这类方式：ios内嵌网页消除阻尼回弹效果，让前端解决？ - 掘金 (juejin.cn)
解决页面使用overflow: scroll在iOS上滑动卡顿的问题 - 掘金 (juejin.cn)
ios局部滚动的坑及解决方案
要完全去除下拉的橡皮筋效果，个人摸索出的方案是：先要禁用全局的（body的）overflow，再在touchstart时，判断scrollTop是否小于等于0，如果是，再在touchmove时，如果是下滑，则将滚动容器设置为不可滚动，如果是上滑，则将滚动容器恢复为可滚动。当然，这个也有个不足，就是及时当前滑动为结束前（手指未离开屏幕），即使将滚动容器设置为可滚动的，实际滚动容器也无法滚动。优点是可以彻底禁用下拉的橡皮筋效果。
个人的感觉是，在不影响实际的交互逻辑实现的情况下，能不改原生的东西就尽量保留，IOS和Android的交互效果并不用完全一模一样
微信小程序禁用下拉刷新：(81条消息) 小程序 - 禁止iphone手机页面下拉_小程序禁用iphone下拉效果_jnChen10的博客-CSDN博客

移动端touch事件相关

注意事项

什么时候touchmove不会触发

什么时候touchend不会触发

下拉刷新实现注意事项：

关于禁用IOS浏览器自带的下拉刷新

关于禁用IOS的橡皮筋效果

相关资料