javascript - 有没有办法在 Chrome 中的选择选项元素上添加事件？

Question

我正在尝试将自定义样式添加到 <select>元素，并且由于跨浏览器的限制，我需要知道:

1. 展开选择下拉列表时(我快速进行了 Google 搜索，但似乎不可能)
2. 在 <option> 添加事件元素

第二个选项似乎适用于除 Chrome 之外的所有浏览器。我宁愿避免做一些讨厌的浏览器检测，所以如果有人有建议，我正在寻找解决这两个选项之一的方法？？

以下内容适用于除 Chrome 之外的所有浏览器:

<select id="gender" name="gender">
     <option></option>
     <option class="click">Male</option>
     <option>Female</option>
     <option>Other</option>
</select>

<script>
element = document.getElementById('gender');

for (var iterator = 0; iterator < element.options.length; iterator++) {
    var optionElement = element.options[iterator];
    if (optionElement.className == 'click') {
        optionElement.addEventListener('click', function() {alert('gender')})
    }
}
</script>

我无法在 <select> 上使用事件的原因是因为我需要知道下拉列表是否展开(上面第 1 点)。我还考虑过使用 onChange事件，但浏览器似乎对此有不同的 react 。有些会在您单击时使用react，而另一些会在您更改值时使用react。

Answer 1

看起来我的两个选择都不可行(除非有人想办法修复损坏的事件)。

选项 1. 我尝试在选择上实现一些“展开跟踪器”以了解元素实际展开的时间，但由于浏览器处理选择的方式不同，这似乎是不可能完成的任务。即使找到了某种神奇的配方，它对于任何 future 的浏览器更新来说都是脆弱的。

选项 2. 鉴于 Firefox 也对 onchange 行为不当事件，我不知道有什么方法可以解决这类问题，也不知道如何强制 Chrome 对它似乎忽略的事件使用react(也许一些 JavaScript 专家可以在这里提出一些时髦的解决方案，但我会感到惊讶)。

所以经过几次尝试后，<select> 似乎有 3 个主要差异。表现:

1. IE 10 及更低版本使用非常有限的下拉渲染引擎(就样式而言)。
2. Firefox 不能正确处理 onchange使用键盘时的事件。
3. Chrome 会忽略 <option>事件。

鉴于这种糟糕的组合，我不得不求助于:

1. 使用 IE <= 10 浏览器的条件。
2. 添加 onkeydown事件修复 Firefox 的 onchange情况。
3. 仅使用选择事件来绕过 Chrome 的限制。

在 Firefox 上渲染效果不理想，因为有某种延迟，但这看起来是最好的，因为它会给出多么不标准 <select>元素是。

我并没有过多地了解我正在尝试做的事情的细节，但我实际上是在尝试在选择的元素上实现“占位符样式”，以使我的表单具有统一的外观和感觉。有趣的部分是不同的浏览器如何处理 <select>样式以及当下拉列表展开和未展开时样式有何不同。