onMouseMove没有't在<选项>元素

onMouseMove doesn't fire over <option> element in Chrome

本文关键字：选项 元素 gt lt 没有 onMouseMove      更新时间：2023-09-26

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

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

我认为这可能与此有关：

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

有人知道如何绕过这个吗？具体地说，我想在任何给定的时间获得我正在移动的<option>元素的一个实例。

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

正如您所怀疑的，鼠标事件在Chrome 中的选择/选项上不起作用

可能的解决方法是：

  • 选择某个选项时，请使用onclick侦听器
  • 使用DHTML绘制下拉菜单等选项
  • 使用带有"大小"属性的select，通常用于多选。具有"大小"属性的select中的选项会对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);
    });
}
相关文章：