Vue页面部分区域在iOS 16.4及以上版本无法点击的问题排查

1. 针对iOS 16.4+ Safari事件委托兼容性调整 #

Vue 2.5的事件绑定依赖浏览器事件委托机制，iOS 16.4后Safari对事件冒泡/委托的处理有细微变更，可能导致第一个.temp区域的点击事件未被正确捕获。可以尝试：

• 给第一个.temp容器添加空的点击事件，强制浏览器识别该区域为可交互区域：

<div class="temp" @click="">
  <!-- 原有内容 -->
</div>

• 给<i>标签的点击事件替换为@click.stop.prevent，避免事件冒泡被异常拦截：

<i class="icon-minus" @click.stop.prevent="incrementCurrentSetpoint(-0.5, 1)"></i>

2. 排查pointer-events CSS属性干扰 #

虽然添加了cursor:pointer，但可能父元素或动态绑定的类存在pointer-events:none的设置，影响iOS下的点击识别：

• 检查.temps.inactive或.disabled类的CSS规则，确保没有全局禁用点击：

/* 避免这类规则影响第一个区域 */
.temps.inactive {
  pointer-events: none;
}

• 强制给第一个.temp的可点击元素开启点击权限：

.temp:first-child .form-checkbox,
.temp:first-child .input i {
  pointer-events: auto !important;
}

3. 修复radio与label的关联问题 #

iOS 16.4后Safari对label和input的关联处理有更新，未明确绑定id和for可能导致点击事件被拦截。给radio添加唯一ID，让label通过for属性关联：

<div class="temp">
  <label class="form-checkbox" :class="{disabled: !is_zone_off || !can_change_setpoints}" for="radio-temp-1">
    <input type="radio" id="radio-temp-1" :value="1" v-model="mutated_t1_t2" :disabled="!is_zone_off || !can_change_setpoints">
    <span>First</span>
  </label>
  <!-- 输入框部分 -->
</div>
<div class="temp">
  <label class="form-checkbox" :class="{disabled: !is_zone_off || !can_change_setpoints}" for="radio-temp-2">
    <input type="radio" id="radio-temp-2" :value="2" v-model="mutated_t1_t2" :disabled="!is_zone_off || !can_change_setpoints">
    <span>Second</span>
  </label>
  <!-- 输入框部分 -->
</div>

4. 验证DOM结构与布局异常 #

连接iOS设备到Safari开发者工具，查看第一个.temp区域的DOM结构：

• 对比第二个.temp，检查是否有元素的z-index过高覆盖点击区域
• 检查第一个区域的元素尺寸、定位是否异常（比如被设置为opacity:0或visibility:hidden但未移除点击事件）
• 尝试交换两个.temp的代码位置，如果问题转移到第二个区域，说明是数据绑定逻辑的问题；若仍出现在第一个位置，则是父容器的布局或事件处理异常

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