如何修复移动浏览器上 touchend 事件不触发的bug

 我来答

1个回答

#热议# 为什么有人显老，有人显年轻？

可以叫我表哥
2015-01-16 · 知道合伙人数码行家

可以叫我表哥
知道合伙人数码行家

采纳数：25897 获赞数：1464984

2010年毕业于北京化工大学北方学院计算机科学与技术专业毕业，学士学位，工程电子技术行业4年从业经验。

向TA提问私信TA

关注

展开全部

最近在修改一个移动浏览器上的滑动(slide)组件, 功能大致和一般的 slide 差不多, 就是当手指滑动时, slide 也跟着滑动, 放手后 slide 滑动一张, 与桌面浏览器不同的是将 mouse 事件换成 touch 事件.

那么大致实现就是监听 DOM 元素的 touchstart, touchmove, touchend 事件.
按常理这些 touch 事件的触发顺序是: touchstart, ...touchmove...(多次), touchend.
但在移动(Android 4.0.4 手机)浏览器上测试后发现 touchend 事件没有如约触发.

如何重现这个问题
----------------
监听一个 DOM 元素的 touchstart, touchmove, touchend 事件.
如果只是 touch 一下这个 DOM 元素, 会触发 touchstart, touchend, 很正常.
如果按住这个 DOM 元素, 滑动一下后放手, 发现只会触发 touchstart, touchmove, 而且 touchmove 没有触发多次.
因此这个bug的触发点就是:
如果触发了 touchmove, touchend 就不会被触发了, 而且 touchmove 没有持续触发.
在网上收集了一些资料后发现此乃移动浏览器上的bug.
> On Android ICS if no preventDefault is called on touchstart or the firsttouchmove,
> further touchmove events and the touchend will not be fired.

如何修复这个bug
----------------
很简单, 只要在 touchstart 的时候调用下 event.preventDefault(), 即可让其他事件都正常被触发了!