jQuery懸停 - mouseout事件不能在IE8中工作

Question

我的屏幕上有兩個框，都是動態生成的文本。首先是一個瘋狂的類型的段落，您可以點擊屏幕下半部分的單詞，並讓它們替換頂部框中的單詞。 （它們通過代碼中的'data-id'屬性鏈接在這裏。）我想要的是，當我將鼠標懸停在底部框中的單詞上並加上頂部框中的相應單詞時，底部框中的單詞將加下劃線。用於懸停的mouseenter處理程序在我的所有瀏覽器中都能正常工作。但IE8中的mouseleave處理程序似乎被忽略，因爲IE8中的單詞保持粗體和下劃線。

<script> 
    $(document).ready(function() { 
    function hoverIn() { 
     var id = $(this).attr('data-id'); 
     var txt = $('.fullText span[data-id='+id+']').text(); 
     var vartxt = $(this).text(); 
     $('.fullText span[data-id='+id+']').html('<b>'+txt+'</b>'); 
     $(this).html('<u>'+vartxt+'</u>'); 
    } 
    function hoverOut() { 
     var id = $(this).attr('data-id'); 
     var txt = $('.fullText span[data-id='+id+']').html(); 
     var newtxt1 = txt.replace(/<b>/gm, ''); 
     var newtxt = newtxt1.replace(/<\/b>/gm, ''); 
     var vtxt = $(this).html(); 
     var newvtxt1 = vtxt.replace(/<u>/gm, ''); 
     var newvtxt = newvtxt1.replace(/<\/u>/gm, ''); 
     $('.fullText span[data-id='+id+']').html(newtxt); 
     $(this).html(newvtxt); 
    } 
    $('body').load(function(){ 
     $('#analyzed').addClass('analyzed'); 
    }); 
    $(".confWords span").bind('click', (function() { 
     var id = $(this).attr('data-id'); 
     $('.fullText span[data-id='+id+']').text($(this).text()); 
    })); 
    $(".confWords span").hover(hoverIn, hoverOut); 

    // Disregard the next 
    $("#reset").bind('click', (function() { 
     $('.orig').trigger('click'); 
    })); 
    $("#edit").bind('click', (function() { 
     history.back(-1); 
    })); 
    }); 
</script> 

Answer 1

而不是依靠.hover（）嘗試委託給mouseenter和mouseleave具體。

$('.confWords span').live('mouseenter mouseleave', function(event) { 
    if (event.type == 'mousenter') { 
     hoverIn(); 
    } else if (event.type == 'mouseleave') { 
     hoverOut(); 
    } 
}); 

你也可能需要添加event.stopPropagation();以防止事件懸停後滴備份DOM如下：

$('.confWords span').live('mouseenter mouseleave', function(event) { 
    event.stopPropagation(); 

    if (event.type == 'mousenter') { 
     hoverIn(); 
    } else if (event.type == 'mouseleave') { 
     hoverOut(); 
    } 
});