iOS设备中jQuery点击显示/隐藏Div功能异常求助

问题根源 #

iOS Safari对非原生可交互元素（如<div>）的click事件支持存在兼容性问题：默认情况下这类元素不会被识别为可点击对象，且click事件存在300ms延迟，导致事件无法正常触发。

解决方案 #

以下几种方法可解决该问题，任选其一即可：

1. 同时绑定touchstart和click事件

修改事件绑定逻辑，同时监听触摸和点击事件，确保iOS设备能正确响应：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  // 封装事件处理函数，避免重复代码
  function showContent() {
    $(".pup").show();
    $(".pdo").hide();
    $(".team").show();
  }

  function hideContent() {
    $(".pup").hide();
    $(".pdo").show();
    $(".team").hide();
  }

  // 同时绑定touchstart和click事件，阻止重复触发
  $(".pdo").on('touchstart click', function(e) {
    e.preventDefault();
    showContent();
  });

  $(".pup").on('touchstart click', function(e) {
    e.preventDefault();
    hideContent();
  });
</script>
<style>
  .team, .pup {
    display: none;
  }
  /* 关键：添加cursor让Safari识别为可点击元素 */
  .pdo, .pup {
    cursor: pointer;
  }
</style>

2. 用CSS标记元素为可交互状态

给目标元素添加cursor: pointer，让Safari将其视为可点击元素，配合原有click事件即可生效：

.pdo, .pup {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* 可选：移除iOS点击高亮效果 */
}

同时建议将jQuery版本升级到3.x系列，修复旧版本的iOS兼容bug。

3. 改用事件委托绑定事件

如果元素是动态生成的，事件委托能确保事件正确绑定到目标元素：

$(document).on('touchstart click', '.pdo', function(e) {
  e.preventDefault();
  $(".pup").show();
  $(".pdo").hide();
  $(".team").show();
});

$(document).on('touchstart click', '.pup', function(e) {
  e.preventDefault();
  $(".pup").hide();
  $(".pdo").show();
  $(".team").hide();
});

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