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

Question

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

1. 扩展选择下拉列表时（我做了一个快速的谷歌搜索，它似乎似乎可能）
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 事件，但浏览器似乎对它的反应不同。有些会在您单击时做出反应，有些会在您更改值时做出反应。

Answer 1

看起来我的两个选项都不可行（除非有人修复损坏的事件）。

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

选项 2. 鉴于 Firefox 对 onchange 事件也有不当行为，我不知道有任何方法可以解决此类问题，也不知道如何强制 Chrome 对似乎发生的事件做出反应忽略（也许一些 JavaScript 大师可以在这里提出一些时髦的解决方案，但我会感到惊讶）。

因此，经过多次尝试，<select> 的行为方式似乎存在 3 个主要差异：

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

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

1. 对 IE
2. 添加一个onkeydown 事件来修复Firefox 的onchange 情况。
3. 仅使用选择事件来绕过 Chrome 的限制。

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

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

Answer 2

试试这个：

element = document.getElementById('gender');

element.addEventListener('change', function() {
    if (this.value === 'Male') {
        alert(this.value);
    }
});

此代码已在 OSX 上使用 Chrome、Firefox 和 Safari 进行测试。