为什么 touchstart 事件在 iOS 上没反应？

Mc.博泽提问于 2026-03-02 17:38:22 阅读 3

移动

我在做一个移动端的滑动组件，用 touchstart 监听触摸开始，但在 iPhone 上完全没触发，安卓却正常。是不是哪里写错了？

我给元素加了下面这个 CSS，会不会是影响了事件冒泡？

.slider {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}

JS 里就是简单的 element.addEventListener('touchstart', handler)，试过加 passive: false 也没用……

我来解答赞 1 收藏

反馈

1 条解答

端木义霞 Lv1

这个问题我之前做移动端轮播的时候踩过坑，当时也卡在这好久。

iOS Safari 有个很恶心的机制，普通的 div 元素默认被认为是"非交互元素"，不会响应 touch 事件。你给它绑定 listener，iOS 直接无视，安卓倒是没这毛病。

解决方法很简单，给你的 .slider 加一行 CSS：

.slider {

  cursor: pointer;

  touch-action: none;

  -webkit-user-select: none;

  user-select: none;

  overflow: hidden;

}

加上 cursor: pointer 之后，iOS 就会把这个元素当成"可交互元素"，touch 事件就能正常触发了。

你原来的 CSS 里 touch-action: none 和 user-select: none 都没问题，不会影响事件冒泡，反而是做滑动组件的标准配置，能防止页面跟着滚动和文字被选中。

另外提一嘴，如果你后面要处理 touchmove 做拖拽，记得加 passive: false，不然 preventDefault() 会失效：

element.addEventListener('touchmove', handler, { passive: false });

这个问题只会在 iOS 上出现，苹果这波操作属实坑了不少人。

2026-03-02 18:04