在网页开发中，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结构中已将楼栋选择项改为
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
907
