uniapp微信小程序安卓手机Touchend事件无法触发

前言

在使用uniapp开发微信小程序时,需要做一个下拉功能,使用touch事件实现。实际情况出现了touchend事件无法触发的情况。

如何解决呢?

1. 解决方案

移动项目开发过程中,经常需要用到滑动的事件来处理一些效果。正常情况下,我们会通过 touchstart->touchmove->touchend 的过程来定义这个事件。这些事件的触发顺序是 touchstart, touchmove, touchmove ..... touchend。

绝大部分平板或手机是这样有序执行。但是以Android 4.0.4为首的他们的touchend事件没有像预期的那样触发。

监听这些事件我们会发现,当只是轻点一下屏幕时,touchend可以正常触发。但是只要当touchmove 被触发之后,touchend就不会再被触发了,而且touchmove也没有持续触发。

在网上搜集了一些资料显示,这是 Android 上浏览器的bug

On Android ICS if no preventDefault is called on touchstart or the firsttouchmove,

further touchmove events and the touchend will not be fired.

1.1 添加修饰符

正如提到的我们只需要在 touchstart 或者 touchmove 里执行一下 e.preventDefault(); 就可以避免这个bug。但是,问题来了:添加了 preventDefault 之后,正常的scroll事件也被屏蔽了!我们意外的发现滚动条也不能用了!

所以此方案不行。

1.2 使用touch-action

语法:

arduino 复制代码
element {
    touch-action: auto | none | manipulation | pan-x | pan-y | pan-x pan-y | pinch-zoom;
}

auto:默认值。浏览器会应用其默认的触摸行为。

none:禁止触摸事件上的默认行为,所有触摸事件都会传递给元素(包括滚动)。这通常用于需要完全控制触摸行为的自定义滚动、拖拽等场景。

manipulation:允许水平及垂直滚动,并阻止其他非标准的默认触摸行为(如双击缩放)。这通常适用于需要滚动的区域,但又不希望触发其他复杂触摸交互的场合。

pan-x:允许水平滚动,并阻止其他所有默认触摸行为(包括垂直滚动)。

pan-y:允许垂直滚动,并阻止其他所有默认触摸行为(包括水平滚动)。

pan-x pan-y:允许水平和垂直滚动,并阻止其他所有默认触摸行为。

pinch-zoom:允许用户通过触摸进行缩放(例如,双指缩放)。注意,这个值并不阻止滚动,滚动行为仍可能由 auto、pan-x、pan-y 或 manipulation 控制。

使用场景:

自定义滚动:当你需要在某个元素内实现自定义滚动时,可以将 touch-action 设置为 none,这样浏览器就不会干预你的滚动逻辑。

提升滚动性能:对于大型列表或图片库,可以通过设置 touch-action: pan-y 来优化垂直滚动性能,同时阻止其他可能会干扰滚动流畅性的默认触摸行为。

防止不必要的缩放:在某些情况下,你可能不希望用户通过触摸来缩放页面或元素(尤其是在小屏幕设备上),这时可以将 touch-action 设置为 manipulation 或更具体的值来阻止这种行为。

这种方案也会出现滚动事件无法触发。

1.3 touchcancel替代

touchend事件无法触发、但是touchcancel可以触发,这是一个改动最小的方案。

1.4 使用scroll-view组件实现

因为scroll-view组件存在下拉的实现方式,可以一开始基于组件开发。

总结

最后总结一下:出现touchend事件无法触发的情况,使用touchcancel事件替换影响最小。

如有错误,请指正O^O!

相关推荐
xiaohe06012 分钟前
💘 霸道女总裁爱上前端开发的我
前端·游戏开发·trae
sophie旭5 分钟前
内存泄露排查之我的微感受
前端·javascript·性能优化
k***19513 分钟前
Spring 核心技术解析【纯干货版】- Ⅶ:Spring 切面编程模块 Spring-Instrument 模块精讲
前端·数据库·spring
rgeshfgreh1 小时前
Spring事务传播机制深度解析
java·前端·数据库
Hilaku1 小时前
我用 Gemini 3 Pro 手搓了一个并发邮件群发神器(附源码)
前端·javascript·github
IT_陈寒1 小时前
Java性能调优实战:5个被低估却提升30%效率的JVM参数
前端·人工智能·后端
快手技术2 小时前
AAAI 2026|全面发力!快手斩获 3 篇 Oral,12 篇论文入选!
前端·后端·算法
颜酱2 小时前
前端算法必备:滑动窗口从入门到很熟练(最长/最短/计数三大类型)
前端·后端·算法
全栈前端老曹2 小时前
【包管理】npm init 项目名后底层发生了什么的完整逻辑
前端·javascript·npm·node.js·json·包管理·底层原理
HHHHHY2 小时前
mathjs简单实现一个数学计算公式及校验组件
前端·javascript·vue.js