<option> 上的事件触发器在 webkit 上不起作用答案

【问题标题】：Event trigger on <option> doesn't work on webkit<option> 上的事件触发器在 webkit 上不起作用
【发布时间】：2019-03-07 14:12:17
【问题描述】：

我想在<select> 下拉列表中添加一个事件触发器。示例（jsFiddle）：

$( document ).ready(function() {
    $('.lorem').click(function() {
        alert('ipsum');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option class="lorem">1</option>
  <option class="lorem">2</option>
</select>

使用 Firefox，当我点击它时，它触发良好。但在 webkit（Chrome/Safari 等）上，它不起作用。为什么？

【问题讨论】：

您是特别需要在<option> 元素上添加事件侦听器，还是只想在<select> 元素上侦听输入？
您是否特别想知道为什么？这可能是每个浏览器中点击事件如何冒泡的一个怪癖。解决方案是使用选择的更改而不是单击选项。
这个解决方案包含在我标记的副本中
除了click 不能在所有浏览器中处理option 元素（原因仅仅是他们对规范的解释。它没有在任何地方记录），出于可访问性原因，这也是不好的做法。总是使用change，那么问题就没有实际意义了。
投票重新开放。这个问题不是重复的。 OP 专门询问为什么该代码适用于 Firefox，但不适用于 WebKit，并且链接的副本没有解决该问题。

标签： javascript jquery webkit eventtrigger

【解决方案1】：

如果你使用它来检测输入变化，你可以使用.change():

$( document ).ready(function() {

  $("select").change(function(e) {
    console.log($("select").val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option class="lorem">1</option>
  <option class="lorem">2</option>
</select>

【讨论】：

【解决方案2】：

您可以改为在您的选择元素上使用change 事件，然后检查所选选项在哪里具有lorem 类，如下所示：

$(document).ready(function() {
  $('select').on('change', function() {
    if ($("option:selected", this).hasClass('lorem')) {
      alert('ipsum');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option class="lorem">1</option>
  <option class="lorem">2</option>
  <option class="foo">3</option>
</select>

【讨论】：