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

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《为什么 Safari 浏览器中的 `` 标签无法触发点击事件？ 》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

select 标签在 Safari 中无法触发点击事件解决方法

问题描述：

在 Chrome 浏览器中，点击 <select> 标签可以触发点击事件，但在 Safari 浏览器中却无法触发。这导致无法在点击 <select> 标签时执行所需的请求和更新操作。

HTML 代码：

<div class="building_select">
  <div class="select_building">
    <div class="left_cent">楼栋</div>
    &lt;select class=&quot;tower_select&quot; id=&quot;first_tower_select&quot;&gt;
      <optgroup disabled hidden></optgroup>
      <option value="0">全部</option>
    &lt;/select&gt;
    <div class="select_room">
      <div class="left_cent">房号</div>
      &lt;select class=&quot;n_select&quot; id=&quot;first_storey_select&quot;&gt;
        <optgroup disabled hidden></optgroup>
        <option value="0">全部层</option>
      &lt;/select&gt;
      &lt;select class=&quot;n_select&quot; id=&quot;first_room_select&quot;&gt;
        <optgroup disabled hidden></optgroup>
        <option value="0">全部房</option>
      &lt;/select&gt;
    </div>
  </div>
</div>

JavaScript 代码：

$(document).on('click', '#first_tower_select', function () {
  let project_id = $("#first_project_select").val()
  if (project_id) {
    getBuilding(project_id)
  }
})

解决方法：

目前存在问题，在 Safari 浏览器中无法在 <select> 标签上触发点击事件。虽然尚未找到根本原因，但可以使用 onfocus 事件代替 onclick 事件，以便在 Safari 中触发相同的行为。

修改后的 JavaScript 代码：

$(document).on('focus', '#first_tower_select', function () {
  let project_id = $("#first_project_select").val()
  if (project_id) {
    getBuilding(project_id)
  }
})

通过使用 onfocus 事件，可以在 Safari 浏览器中实现与 Chrome 浏览器类似的行为，即在点击 <select> 标签时触发事件。

本篇关于《为什么 Safari 浏览器中的 `` 标签无法触发点击事件？ 》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！