onMouseMove 不会触发 Chrome 中的 <option> 元素答案

【问题标题】：onMouseMove doesn't fire over <option> element in ChromeonMouseMove 不会触发 Chrome 中的 <option> 元素
【发布时间】：2012-02-12 17:11:13
【问题描述】：

假设我有一个 onMouseMove 监听器，它只记录鼠标的 x 和 y 位置。

如果我展开一个选择元素并将鼠标移到暴露的 <option> 元素上，onMouseMove 事件永远不会触发。

我认为这可能与此有关：

http://www.terminally-incoherent.com/blog/2009/01/12/ie-jquery-hovering-and-option-elements/

有人知道如何解决这个问题吗？具体来说，我想获取我在任何给定时间移动的<option> 元素的实例。

我不希望更改 <select> 或 <option> 元素，因为我的代码是由 chrome 扩展程序注入的，因此更改每个页面会很麻烦。

【问题讨论】：

我玩了一点选择，你是对的 - 当用户从选择元素中选择一个选项时，不会触发鼠标事件。我唯一的想法是使用统一（uniformjs.com）之类的东西将原始选择元素替换为“样式化”元素。

标签： javascript html google-chrome webkit google-chrome-extension

【解决方案1】：

正如你所怀疑的，鼠标事件do not work on a select/option in Chrome

可能的解决方法可能是：

选择选项时使用 onclick 侦听器。
使用 DHTML 绘制下拉菜单等选项
使用带有“大小”属性的选择，通常用于多选。带有“大小”属性的选择内的选项确实会对 Chrome 中的鼠标事件做出反应。

我在这里创建了第三个选项的示例：

http://jsfiddle.net/SNLzA/

这会克隆原始选择并隐藏克隆。克隆被赋予一个大小属性，以便它可以对鼠标事件做出反应。然后，当单击原始选择时，我们会暂时显示克隆，其样式看起来有点像选项下拉菜单。然后当用户单击一个选项时，我们关闭克隆并在原始选择中设置值。一个 click 事件监听器附加到 body 以在没有选项时关闭克隆。

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);
    });
}

【讨论】：