Apple移动设备上Click事件无响应问题求助

针对iOS设备（iPad/iPhone）上click事件不触发的问题，提供以下几个实用解决方案：

1. 同时绑定touchstart和click事件 #

iOS Safari对部分非表单、非链接元素的click事件支持存在兼容性问题，绑定touchstart事件可以直接响应触摸操作，避免click延迟或失效。修改你的JS代码：

const imgContainer = document.getElementById('click-me');
// 移除箭头函数包裹，直接绑定函数引用
imgContainer.addEventListener('click', open_image);
// 添加touchstart事件绑定
imgContainer.addEventListener('touchstart', open_image);

如果担心touchstart和click同时触发导致重复执行，可以在touchstart回调中阻止默认行为：

imgContainer.addEventListener('touchstart', function(e) {
  e.preventDefault();
  open_image();
});

2. 给元素添加可交互标识 #

在HTML的图片容器中添加tabindex="0"，将其标记为可聚焦元素，iOS会识别它为可交互对象，从而正常触发click事件：

<div id="click-me" tabindex="0">
  <!-- 你的图片内容 -->
</div>

如果不想显示聚焦后的默认轮廓，可以添加CSS隐藏：

#click-me:focus {
  outline: none;
}

3. 排查事件阻止逻辑 #

检查页面中是否有其他脚本在触摸事件（如touchmove、touchend）中调用了e.preventDefault()或e.stopPropagation()，这类操作会抑制后续的click事件触发。如果有，调整逻辑避免不必要的事件阻止。

4. 确认元素未被遮挡 #

检查图片容器的z-index属性，确保没有被其他透明元素（如固定定位的导航栏、隐藏的弹窗遮罩）覆盖。可以临时给容器添加背景色（如background: rgba(255,0,0,0.2)），验证点击区域是否正确。

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