IE 和 Chrome 不会为 <option> 元素触发鼠标悬停事件

Question

我的代码仅适用于 Firefox。这是为什么呢？

HTML：

<select id="selecter">
         <option>one</option>
         <option>two</option>
         <option>three</option>
   </select>

Javascript：

$(function() {
   $(document).on("mouseover", "#selecter option",function(){
            alert(1)        
    });
});

我很好奇为什么 IE 和 chrome 不会触发 mouseover 事件。请参阅此 JSFiddle：http://jsfiddle.net/yT6Y5/72/（在 Firefox 中完美运行。）

如何让 IE 和 Chrome 触发鼠标悬停事件？

Answer 1

问题在于浏览器呈现下拉菜单的方式不同。 Chrome 不是将其呈现为 HTML 组件，而是呈现为原生 GUI 组件。那不能有来自 JS 的悬停处理程序。

如果您想确保它适用于所有浏览器，请不要使用下拉菜单或获取脚本来创建使用 HTML 元素的下拉菜单

Answer 2

看起来，当您将鼠标悬停在 IE 和 chrome 中的某个选项上时，实际上并没有触发任何事件，

最好应该绑定更改事件。

$(function() {
    $("#selecter").change(function(){
            alert(1);
    });
});

Answer 3

也许你应该使用不同的方法来绑定事件

 $(function() {
    $("#selecter").mouseover(function(){
        alert(1)        
     });
  });