IE和Chrome不会为<option>元素</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＆amp;中的选项上时，实际上没有事件被触发铬，

最好应该绑定更改事件。

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

Answer 3

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

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