寻找jQuery中touchstart/touchend事件在Safari浏览器的兼容解决方案

1. Safari浏览器是否真的不支持touchstart/touchend事件？ #

该说法属于误传。iOS端Safari从iOS 2.0版本就已经完整支持touchstart、touchend、touchmove等标准触摸事件，你遇到的事件不触发问题和Safari对触摸事件的支持无关，常见诱因包括：

• 非交互标签（如span）未添加cursor: pointer样式、未设置tabindex属性，Safari没有识别为可点击元素
• 同时绑定click和touchend事件时出现事件冲突，或touchend触发后未阻止默认行为导致事件冒泡异常
• 事件绑定时机错误，绑定执行时对应DOM元素还未渲染完成

2. Safari是否支持任意jQuery触摸事件？ #

jQuery本身没有内置独立的触摸事件体系，通过.on('touchend')这类写法绑定的事件本质是jQuery对原生DOM事件的透传，只要Safari支持对应原生事件，jQuery就能正常绑定使用，不存在Safari不支持jQuery触摸事件的问题，事件失效的排查方向应该放在原生事件触发逻辑本身，和jQuery无关。

3. 提问时附带正在开发的站点链接是否不合规范？如果允许的话我可以补充对应链接。 #

符合规范。只要链接为问题相关的可访问开发页面、无广告性质，不管是Stack Overflow还是国内技术社区都允许附带站点链接，链接可以帮助回答者快速复现问题、定位异常原因，反而能提升你获得有效回答的概率。

4. 将所有span标签改为原生HTML按钮是不是更容易实现兼容？ #

是的，该方案可以解决90%以上的移动端交互兼容问题。原生<button>属于天生的可交互标签，Safari会默认识别为可点击元素，不需要额外加样式或属性就能正常触发各类交互事件。而span作为非交互的行内标签，在移动端Safari中如果未配置可交互相关的属性和样式，很容易出现事件无法触发的异常，改用原生按钮可以规避大量无意义的兼容问题。

原生JavaScript事件实现说明 #

你写的原生click事件绑定代码在Safari触摸屏环境下完全可以正常使用，不需要额外找替代事件：

document.querySelectorAll('.link').forEach(link => {
  link.addEventListener('click', event => {
    /* 你的业务逻辑 */
  });
});

现在移动端Safari只要页面配置了<meta name="viewport" content="width=device-width">就已经取消了300ms点击延迟，直接绑定click事件完全够用。如果你需要更快的交互响应，可以使用pointerdown事件，该事件统一了鼠标、触摸、触控笔等多端输入的触发逻辑，兼容性表现更好。

如果坚持使用span作为按钮，需要额外添加以下CSS属性保证Safari识别为可交互元素：

.link {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

同时可以给span添加tabindex="0"属性，提升键盘导航场景下的兼容性。

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