Safari/iOS浏览器中Button的onClick事件无法触发问题求助

问题表现 #

• 地址搜索结果的按钮在桌面端Chrome/Edge等Chromium内核浏览器、安卓设备所有浏览器中均可正常响应点击
• 在iOS全版本Safari、Mac端Safari浏览器中点击按钮无反应，经断点排查确认onClick回调完全没有被触发

关联代码 #

业务渲染逻辑 #

<Popover>
  <div className="MiajAddressSearch__Results">
    {searchPlacesResult.data.map((address) => (
      <button
        type="button"
        onClick={() => {
          setIsFocused(false);
          setCanShip(true);
          setCurrentAddress(address);
          setSearchText(address.text);
        }}
        key={`address-${address.id}`}
        title={address.text}
        className="MiajAddressSearch__Result MiajAddressSearch__Result--clickable"
      >
        {address.text}
      </button>
    ))}
    <div
      ref={(element) => {
        if (element) {
          element.append(attributionsElement);
        }
      }}
      className="MiajAddressSearch__Result"
    >
      <img src={googleLogo} alt="Google Logo" />
    </div>
  </div>
</Popover>

Popover组件实现 #

const Popover = ({ children }) => (
  <div className="MiajPopover__Container">
    <div className="MiajPopover">{children}</div>
  </div>
);

Popover.propTypes = {
  children: PropTypes.node,
};

Popover.defaultProps = {
  children: null,
};

Popover组件样式 #

.MiajPopover {
  position: relative;

  &__Container {
    position: absolute;
  }
}

已尝试无效的排查方案 #

• 为按钮元素添加cursor: pointer;样式
• 将setIsFocused(false);逻辑包裹在setTimeout(() => setIsFocused(false), 0);中延迟执行
• 为按钮添加与onClick逻辑完全一致的onTap、onTapStart事件处理
• 移除类名为MiajAddressSearch__Results的父级div容器

可落地的解决方向 #

按优先级从高到低逐一验证即可：

1. 修复事件拦截问题：Safari对绝对定位元素的事件命中判定和Chromium内核存在差异，当前.MiajPopover__Container仅设置了position: absolute，没有明确层级和事件属性。首先给该容器设置明确的z-index值，同时添加pointer-events: auto;；给容器内不需要响应点击的元素（比如挂载Google logo和attributions的div）添加pointer-events: none;，如果attributions内容里有需要点击的链接，单独给链接元素加pointer-events: auto;即可，避免透明元素覆盖按钮区域拦截点击。
2. 强制元素标记为可交互：给按钮元素添加touch-action: manipulation;样式，该属性会告诉浏览器跳过iOS Safari默认的双击缩放、手势识别延迟，同时强制Webkit内核将元素识别为可点击交互元素，避免事件被跳过。
3. 激活Touch事件派发：如果上述样式调整后仍不生效，给按钮添加一个空的onTouchStart回调：onTouchStart={() => {}}。iOS Safari的事件派发逻辑中，元素如果没有绑定任何touch相关事件监听器，在部分层级场景下会直接跳过click事件的派发，空回调即可触发正常的事件流。
4. 检查动态挂载元素的样式：排查你通过ref append进去的attributionsElement，如果这个外部创建的元素带有绝对定位、固定定位样式，且宽度/高度设置为100%、z-index高于按钮，在Safari里会出现透明区域覆盖按钮的问题，按第一条的pointer-events规则处理即可。

内容的提问来源于stack exchange，提问作者Mike Banks