onMouseMove不会覆盖< option>元素在Chrome中 [英] onMouseMove doesn't fire over <option> element in Chrome

问题描述

假设我有一个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中的选择/选项

可能的解决方法可能是：

• 使用onclick侦听器当选择一个选项时。


• 使用DHTML绘制下拉选项


• 使用带有size属性的select，通常用于多选。具有大小属性的选择内部的选项会对Chrome中的鼠标事件做出反应。

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

http://jsfiddle.net/SNLzA/

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

$ b

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;宽度：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）; 
} ）; 
} 
  

Say I have an onMouseMove listener which just logs the x and y position of the mouse.

If I expand a select element and move my mouse over the exposed <option> elements, the onMouseMove event never fires.

I think it might have something to do with this:

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

Does anybody know how to get around this? Specifically, I would like to get an instance of the <option> element I'm moving over at any given time.

I would prefer not to change the <select> or <option> elements as my code is injected by a chrome extension and it would be burdensome to change every page for this reason.

解决方案

As you suspected, the mouse events do not work on a select/option in Chrome

Possible workarounds might be:

• Use an onclick listener when an option is selected.
• Draw an options like drop down using DHTML
• Use a select with the "size" attribute, typically used for multiselect. Options inside of a select with a "size" attribute do react to the mouse events in Chrome.

I created an example of the third option here:

http://jsfiddle.net/SNLzA/

This clones the original select and hides the clone. The clone is given a size attribute so that it can react to mouse events. Then, when the original select is clicked we temporarily show the clone which has been styled to sort of look like the options drop down. Then when a user clicks an option, we close the clone and set the value in the original select. A click event listener is attached to the body to close the clone when not on an option.

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

这篇关于onMouseMove不会覆盖< option>元素在Chrome中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！