在网页开发中，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> <select id="first_tower_select"> <!-- options will be added dynamically --> </select> <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结构中已将楼栋选择项改为
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
