跨浏览器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浏览器中确保事件被正确触发并执行相应操作，从而解决跨浏览器兼容性问题。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
喜欢就支持一下吧
相关推荐
