为什么在 Safari 浏览器中 select 标签点击事件无法触发?
select 标签在 safari 浏览器中无法触发点击事件的解决办法
在 Web 开发中,有时需要在点击下拉列表框 (select) 元素时执行某些操作。但在某些情况下,开发人员可能会遇到 select 标签在 Chrome 中可以正常触发点击事件,但在 Safari 浏览器中却无法触发的现象。
要解决此问题,可以使用 onfocus 事件代替 onclick 事件。onfocus 事件会在输入字段或其他可获取焦点的元素获得焦点时触发。因此,可以在 onfocus 事件中执行原本打算在点击事件中执行的操作。
以下代码演示了如何替换 onclick 事件为 onfocus 事件:
<div class="building_select"> <div class="select_building"> <div class="left_cent"> 楼栋 </div> <select class="tower_select" id="first_tower_select"> <optgroup disabled hidden></optgroup> <option value="0">全部</option> </select> <div class="select_room"> <div class="left_cent">房号</div> <select class="n_select" id="first_storey_select"> <optgroup disabled hidden></optgroup> <option value="0">全部层</option> </select> <select class="n_select" id="first_room_select"> <optgroup disabled hidden></optgroup> <option value="0">全部房</option> </select> </div> </div> </div>
$(document).on('focus', '#first_tower_select', function () { let project_id = $("#first_project_select").val(); if (project_id) { getBuilding(project_id); } });