IE8 在悬停选择框选项时中断

Question

好的，我的以下代码可以在除 IE 之外的所有浏览器中正常运行。

$('input[title!=], select[title!=]').mouseenter(function(){
    if ($(this).data('focused')!='y') {
        $(this).data('t', this.title).data('focused', 'y');
        this.title = '';
        var pos = $(this).position();
        $('body').append('<div id="toolTip" class="round-5 shadow-heavy"><img class="arrow" src="/images/bg/toolTip.png" alt="" />'+($(this).data('t'))+'</div>');
        $('#toolTip').css('top',(pos.top+($(this).height()/2)-($('#toolTip').innerHeight()/2))+'px').css('left',(pos.left+($(this).innerWidth())+20)+'px'); 
    }
}).mouseleave(function(){
    if ($(this).data('focused')!='n') {
        $(this).data('focused', 'n');
        this.title = $(this).data('t');
        $('#toolTip').remove();
    }
}).focus(function(){if($(this).data('focused')!='y'){$(this).trigger('mouseenter');}}).blur(function(){if($(this).data('focused')!='n'){$(this).trigger('mouseleave');}});  

现在，在 IE 中，如果您打开选择框并将鼠标移到其中一个选项上，该框就会关闭。造成这种情况的原因是 IE 显然没有将选项下拉框算作选择元素的一部分，因此它触发了 mouseleave 事件。

有谁知道解决这个问题吗？

Answer 1

特别是 IE 有一个非常奇怪的 实现，因为 IE6（可能更早）它是从 winforms 引入的......这也是它存在的原因在旧版本中除了 之外的任何内容之上。

不幸的是， 元素上的事件或涉及 元素的事件充其量是不可靠的（就像您所看到的）......并且在 IE 中不能被信任。您可以在 IE 中禁用该行为，但这大约是唯一的“修复”。

全面的替代方案是完全替换 ，有一些 jQuery 插件可以做到这一点，查看此问题以获取相关选项。