移动端 touchend 事件怎么阻止冒泡才有效？

欧阳春豪提问于 2026-03-15 18:43:17 阅读 82

移动

我在做移动端的一个滑动删除功能，父容器和子元素都绑定了 touchend 事件，点击子元素时父级也会触发，试了 stopPropagation() 却没用，是不是写法有问题？

element.addEventListener('touchend', function(e) {
  e.stopPropagation();
  // 其他逻辑
});

触摸事件阻止冒泡

我来解答赞 12 收藏

反馈

1 条解答

极客润兴 Lv1

你的写法其实没问题，stopPropagation() 在 touchend 上是有效的。问题可能出在其他地方。

常见原因是移动端有个坑：touchend 之后浏览器还会自动触发一个 click 事件，所以你阻止了 touchend 的冒泡，但 click 事件还是会上来。

解决办法是同时阻止默认行为：

element.addEventListener('touchend', function(e) {

  e.stopPropagation();

  e.preventDefault();

  // 其他逻辑

}, false);

注意 preventDefault() 要加上，而且建议把第三个参数写成 false（冒泡阶段），这样更符合直觉。

如果还是不行，检查一下你的父容器事件绑定是不是用在了合适的位置，有时候事件绑定在 document 或者 body 上会有些奇怪的行为。

还有一种情况是某些国产浏览器的兼容问题，如果上面方法都不行，可以试试在 touchstart 阶段就阻止：

element.addEventListener('touchstart', function(e) {

  e.stopPropagation();

}, { passive: false });

加上 { passive: false } 是为了能调用 preventDefault，这个参数移动端开发时经常用到。

2026-03-16 23:23