Safari浏览器下select标签点击事件失效了怎么办？

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《Safari浏览器下select标签点击事件失效了怎么办？ 》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

Safari浏览器下select标签点击事件失效的解决方案

在网页开发中，JavaScript事件处理是常见操作，但跨浏览器兼容性问题时有发生。本文探讨Safari浏览器下select标签点击事件失效的问题，并提供解决方案。

问题描述：在Chrome浏览器中，select标签的点击事件能正常触发，但在Safari浏览器中却失效。 代码意图是在点击楼栋选择框(#first_tower_select)时，获取项目ID，并调用getBuilding函数进行数据请求和更新。

部分代码片段如下：

HTML结构：

<div class="building_select">
  <div class="select_building">
    <div class="left_cent">楼栋</div>
    &lt;select id=&quot;first_tower_select&quot;&gt;
      <!-- options will be added dynamically -->
    &lt;/select&gt;<div class="select_room">
      <div class="left_cent">房号</div>
      <!-- ... other elements ... -->
    </div>
  </div>
</div>

JavaScript代码 (问题代码):

$(document).on('click', '#first_tower_select', function () {
  let project_id = $("#first_project_select").val();
  if (project_id) {
    getBuilding(project_id);
  }
});

// ... (代码片段用于动态添加楼栋选项到select标签)...

在Safari浏览器中，点击#first_tower_select不会触发click事件。

解决方案：使用onfocus事件替代onclick事件。onfocus事件在元素获得焦点时触发，在Safari浏览器中更可靠。

修改后的JavaScript代码：

$(document).on('focus', '#first_tower_select', function () {
  let project_id = $("#first_project_select").val();
  if (project_id) {
    getBuilding(project_id);
  }
});

// ... (代码片段用于动态添加楼栋选项到select标签)...

通过将click事件替换为focus事件，可以有效解决Safari浏览器下select标签点击事件失效的问题，确保代码在不同浏览器下的兼容性。 请注意，HTML结构中已将楼栋选择项改为<select></select>标签，确保代码的正确性。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~