为什么 Safari 浏览器无法触发 select 标签的点击事件？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《为什么 Safari 浏览器无法触发 select 标签的点击事件？ 》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

在 Safari 浏览器中无法触发 select 标签的点击事件？

问题描述：

在 Chrome 浏览器中，点击<select>标签可以触发事件，但在 Safari 浏览器中却无法触发。开发者希望在点击<select>标签时触发请求操作，并重新赋值给它。

代码示例：

<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('click', '#first_tower_select', function () {
  let project_id = $("#first_project_select").val();
  if (project_id) {
    getBuilding(project_id);
  }
});

/* 楼栋下拉框 */
for (let k in res) {
  html +=
    `<option value='` + res[k].id + `'>` + res[k].building_no + `</option>`;
}

$("#first_tower_select").append(html);
$("#first_tower_select").find('option[value="' + oldVal + '"]').prop('selected', 'selected');

解决方法：

虽然 <select> 标签在 Chrome 中可以使用 click 事件，但在 Safari 中却无法使用。作为替代方案，可以使用 focus 事件：

$(document).on('focus', '#first_tower_select', function () {
  // 您的代码
});

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。