javascript - 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 对 <select> 的实现非常特别奇怪，因为 IE6(可能更早)它是从 winforms 中拉进来的......这也是它位于除 <iframe> 之外的任何东西之上的原因。在旧版本中。

不幸的是，关于或涉及 <option> 的事件元素充其量是不可靠的(就像你看到的那样)......并且在 IE 中不可信。您可以在 IE 中禁用该行为，但这是唯一的“修复”。

全面替代方案是替换 <select>完全可以，有一些 jQuery 插件可以做到这一点，check out this question for options around that .