正如您所怀疑的,鼠标事件不适用于 Chrome 中的选择/选项
可能的解决方法可能是:
- 选择选项时使用 onclick 侦听器。
- 使用 DHTML 绘制下拉菜单等选项
- 使用带有“size”属性的选择,通常用于多选。带有“size”属性的选择内部的选项确实会对 Chrome 中的鼠标事件做出反应。
我在这里创建了第三个选项的示例:
http://jsfiddle.net/SNLzA/
这将克隆原始选择并隐藏克隆。克隆被赋予一个大小属性,以便它可以对鼠标事件做出反应。然后,当单击原始选择时,我们暂时显示样式已设置为类似于选项下拉列表的克隆。然后,当用户单击某个选项时,我们关闭克隆并在原始选择中设置值。单击事件侦听器附加到主体,以便在不在选项上时关闭克隆。
HTML
<select id="s">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
CSS
select { display: block; width: 60px; }
JS
var select = document.getElementById("s"),
options = select.getElementsByTagName("option"),
clone = select.cloneNode(true),
body = document.body,
isOpen = false,
closeSelect = function() {
select.removeAttribute("size");
clone.setAttribute("style", "display: none;");
isOpen = false;
select.value = options[clone.selectedInput];
},
openSelect = function(e) {
isOpen = true;
clone.setAttribute("style", "display: auto;");
select.setAttribute("size", options.length);
clone.value = options[select.selectedInput];
};
clone.setAttribute("style", "display: none;");
body.insertBefore(clone, select);
body.addEventListener("click", function(e) {
if (isOpen === true && e.target != select) {
closeSelect();
}
});
select.addEventListener("click", openSelect);
for (i = 0; i < options.length; i++) {
options[i].addEventListener("click", function(e) {
closeSelect();
});
options[i].addEventListener("mouseover", function(e) {
console.log("on option: " + e.target.value);
});
}