Question

我的屏幕上有两个框，都有动态生成的文本。第一个是mad-libs类型的段落，您可以点击屏幕下半部分的单词并让它们替换顶部框中的单词。（它们在这里通过代码中的'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();
    }
});

jQuery hover - mouseout事件在IE8中不起作用

1 个答案: