Safari和Chrome浏览器中``标签点击事件差异：如何解决JavaScript事件监听失效问题？（事件.监听.如何解决.失效.器中.....）

wufei123 2025-04-07 阅读:69 评论:0

跨浏览器javascript事件监听：safari与chrome的差异及解决方案开发网页时，JavaScript代码的跨浏览器兼容性至关重要。本文探讨一个在Chrome浏览器中正常运行，但在Safari浏览器中失效的标签点击事件问题，并...

Safari和Chrome浏览器中``标签点击事件差异：如何解决JavaScript事件监听失效问题？

跨浏览器javascript事件监听：safari与chrome的差异及解决方案

开发网页时，JavaScript代码的跨浏览器兼容性至关重要。本文探讨一个在Chrome浏览器中正常运行，但在Safari浏览器中失效的标签点击事件问题，并提供有效的解决方案。

问题描述：

使用$(document).on('click', '#first_tower_select', function () { ... });监听#first_tower_select元素的点击事件，并在点击时调用getBuilding函数更新下拉框选项。此代码在Chrome中运行良好，但在Safari中却无法触发点击事件。

代码示例：

HTML结构：

PHP

<div class="building_select">
  <div class="select_building">
    <div class="left_cent">楼栋</div>
    <optgroup disabled="disabled" hidden=""></optgroup>全部<div class="select_room">
      <div class="left_cent">房号</div>
      <optgroup disabled="disabled" hidden=""></optgroup>全部层<optgroup disabled="disabled" hidden=""></optgroup>全部房</div>
  </div>
</div>

JavaScript代码：

PHP

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

/* 楼栋下拉框 */
for (let k in res) {
  html += "" + res[k].building_no + "";
}

$("#first_tower_select").append(html);
$("#first_tower_select").find('option[value="' + oldVal + '"]').prop('selected', 'selected');

问题分析与解决方案：

Safari和Chrome浏览器处理元素点击事件的机制存在差异。click事件在Safari中，尤其是在下拉菜单交互过程中，可能无法可靠地捕获所有点击操作。

建议使用focus事件替代click事件。focus事件在元素获得焦点时触发，通常比click事件更可靠。修改后的代码如下：

PHP

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