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

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

聖光之護

发布： 2025-03-24 09:16:32

原创

426人浏览过

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

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

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

问题描述：

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

代码示例：

立即学习“Java免费学习笔记（深入）”；

HTML结构：

<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代码：

$(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事件更可靠。修改后的代码如下：

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

登录后复制

通过此方法，可在Safari浏览器中确保事件被正确触发并执行相应操作，从而解决跨浏览器兼容性问题。

以上就是Safari和Chrome浏览器中``标签点击事件差异：如何解决JavaScript事件监听失效问题？的详细内容，更多请关注php中文网其它相关文章！