javascript - IE 和 Chrome 不会触发鼠标悬停事件

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 不会触发鼠标悬停事件。请参阅此 JSFiddle： http: //jsfiddle.net/yT6Y5/72/（在 Firefox 中完美运行。）

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

score 4 · Accepted Answer

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

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

score 1 · Accepted Answer

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

充其量应该绑定在更改事件上。

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

score -2 · Accepted Answer

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

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

javascript - IE 和 Chrome 不会触发鼠标悬停事件元素