跨浏览器javascript事件监听：safari与chrome的差异及解决方案
开发网页时，JavaScript代码的跨浏览器兼容性至关重要。本文探讨一个在Chrome浏览器中正常运行，但在Safari浏览器中失效的标签点击事件问题，并提供有效的解决方案。
问题描述：
使用$(document).on('click', '#first_tower_select', function () { ... });监听#first_tower_select元素的点击事件，并在点击时调用getBuilding函数更新下拉框选项。此代码在Chrome中运行良好，但在Safari中却无法触发点击事件。
代码示例：
立即学习“Java免费学习笔记（深入）”；
HTML结构：
楼栋全部房号全部层全部房
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浏览器中确保事件被正确触发并执行相应操作，从而解决跨浏览器兼容性问题。
