jQuery hover - событие отключения мыши в IE8 - PullRequest
Новая
       21

jQuery hover - событие отключения мыши в IE8

0 голосов
/ 24 марта 2012

У меня на экране два поля, оба с динамически генерируемым текстом. Первый - это параграф типа mad-libs, в котором вы можете щелкнуть слова в нижней половине экрана и заменить их словами в верхнем поле. (Они связаны атрибутом «data-id» в коде здесь.) Я хочу, чтобы слова в нижнем поле были подчеркнуты, когда я наведу на них курсор мыши, и соответствующее слово в верхнем поле было выделено жирным шрифтом. Обработчик mouseenter для hover отлично работает во всех моих браузерах. Но обработчик mouseleave, похоже, игнорируется в IE8, потому что слова остаются жирным шрифтом и подчеркиваются в 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>

1 Ответ

0 голосов
/ 24 марта 2012

Вместо того, чтобы полагаться на .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();
    }
});
...