仅iPhone端EventListener失效，其他设备正常的技术求助

问题核心原因 #

1. 事件类型错误：你绑定了touchmove事件——这是手指滑动过程中触发的，并非点击/按压动作，iPhone上自然不会响应预期的交互逻辑。
2. preventDefault()干扰：在触摸事件中调用evt.preventDefault()会阻断Safari的默认点击事件触发逻辑，甚至导致触摸事件本身无法正常响应。
3. Safari交互识别缺失：如果元素没有明确的交互标识（比如cursor: pointer），Safari可能不会将其判定为可点击元素。

修复方案 #

1. 替换正确的触摸事件

把touchmove换成touchend（手指抬起时触发，更贴合点击逻辑）或touchstart（手指按下时触发）。

2. 调整preventDefault()的使用

移除不必要的evt.preventDefault()，仅在需要阻止页面滚动等特定场景下调用，避免干扰默认交互流程。

3. 添加CSS增强Safari兼容性

给.sub类添加以下样式，确保Safari识别为可交互元素：

.sub {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* 移除点击高亮效果 */
}

4. 简化代码（可选）

使用pointerdown事件替代click和触摸事件，它能同时兼容鼠标和触摸设备，减少冗余代码：

修改后的完整代码示例 #

HTML（结构无需改动）

<div class="sub subOne"><h4>Description</h4><img src="{{ "chevron-black-closed.svg" | asset_url }}" style="width:20px;height:20px;"></div>  
<div class="hidden info subOneinfo ">{{ product.description }}</div>

JavaScript

const subOne = document.querySelector('.subOne');
const subOneinfo = document.querySelector('.subOneinfo');
let open = false;

function handleInteraction(evt) {
  // 仅在需要阻止默认行为时调用，比如防止页面滚动
  // evt.preventDefault();
  
  if (!open) {
    open = subOneinfo;
    subOneinfo.classList.remove("hidden");
  } else if (open === subOneinfo) {
    open.classList.add("hidden");
    open = false;
  } else {
    open.classList.add("hidden");
    open = subOneinfo;
    subOneinfo.classList.remove("hidden");
  }
}

// 用pointerdown替代click和touch事件，兼容所有设备
subOne.addEventListener('pointerdown', handleInteraction);
// 如需兼容旧设备，可保留click事件
subOne.addEventListener('click', handleInteraction);

额外排查点 #

• 检查.hidden类的CSS是否有效：确保是display: none或visibility: hidden等正确的隐藏方式
• 确认元素未被其他元素遮挡（比如z-index层级问题），导致事件无法触发
• 测试时关闭Safari隐私模式，避免脚本限制影响功能

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