Javascript: обработчик события mousemove не запускается

Question

Я работаю над набором модулей электронного обучения, которые должны быть доступны в IE8 (из-за устаревшего оборудования в организации).

Все работает отлично в IE9>. В IE8 обработчик события mouseover не запускается. Вот соответствующие ЯШИ:

$(document).ready(function() { 
    $imageOptions = $('.multi-choice-image-container'); 
    $imageOptions.each(function() { 
     $(this).hover(addHover, removeHover); 
    }) 
}); 

function addHover(ev) { 
    ev = ev || window.event; 
    // add conditional class 
    var $image; 
    if (ev.target.tagName=="IMG") { 
     $image = $(ev.target).parent(); // if event has been triggered from image as opposed to the containing div, get the parent object 
    } else { 
     $image = $(ev.target); 
    } 
    if (!$image.hasClass('hover-magnification')) { 
     $image.addClass('hover-magnification'); 
     $hoveredImageContainer = $image; 
     hoveredImageRect = $hoveredImageContainer[0].getBoundingClientRect(); 
     var hoveredImageRectWidth = hoveredImageRect.right - hoveredImageRect.left; 
     var hoveredImageRectHeight = hoveredImageRect.bottom - hoveredImageRect.top; 
     hoveredXMultiplier = (400 - hoveredImageRectWidth)/hoveredImageRectWidth; 
     hoveredYMultiplier = (800 - hoveredImageRectHeight)/hoveredImageRectHeight; 
     $hoveredImage = $hoveredImageContainer.find('.multi-choice-image'); 
    } 
    if (document.body.addEventListener) { 
     document.body.addEventListener('mousemove', mouseMoveHandler); 
    } else { 
     document.body.attachEvent('mousemove', mouseMoveHandler); 
    } 
} 

function removeHover(ev) { 
    ev = ev || window.event; 
    var $image; 
    if (ev.target.tagName=="IMG") { 
     $image = $(ev.target).parent(); 
    } else { 
     $image = $(ev.target); 
    } 
    $image.removeClass('hover-magnification'); 
    if (document.body.removeEventListener) { 
     document.body.removeEventListener('mousemove', mouseMoveHandler); 
    } else { 
     document.body.detachEvent('mousemove', mouseMoveHandler); 
    } 
    $hoveredImageContainer = null; 
} 

function mouseMoveHandler(ev) { 
    console.log("this function is not firing"); 
    ev = ev || window.event; 
    if ($hoveredImageContainer!=null) { 
     var scroll = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); 
     var xPos = ev.pageX - hoveredImageRect.left; 
     var yPos = ev.pageY - (hoveredImageRect.top+scroll); 
     $hoveredImage.css('left', -((xPos) * hoveredXMultiplier) +'px').css('top', -((yPos) * hoveredYMultiplier) + 'px'); 
    } 
} 

, а некоторые очень упрощенный HTML (с URL изображений изменяются, очевидно):

<div class="multi-choice-image-container" id="option1"> 
    <img class="multi-choice-image" src="url/to/image.png"> 
</div> 
<div class="multi-choice-image-container" id="option2"> 
    <img class="multi-choice-image" src="url/to/image.png"> 
</div> 
<div class="multi-choice-image-container" id="option3"> 
    <img class="multi-choice-image" src="url/to/image.png"> 
</div> 
<div class="multi-choice-image-container" id="option4"> 
    <img class="multi-choice-image" src="url/to/image.png"> 
</div> 

И, наконец, CSS, что делает изображение в полном размере (есть и другие правила что набор переполнение как скрытый, так что увеличенное изображение не распространяется на любые другие элементов):

.hover-magnification img { 
    width: auto; 
    height: 800px; 
    position: absolute; 
} 

Я включил класс добавляющих Js линию, потому что я могу видеть, что эти линии применяются - с изменяется количество изображений, которые меняются, и масштабируется до полного размера. Это функция mouseMoveHandler, которая НЕ запускается, поэтому изображения не корректируют свою позицию в зависимости от положения мыши.

ОК, так что мой простой вопрос, после всего этого, ПОЧЕМУ, обработчик mousemove не запускается в IE8? (Он отлично работает в 9+ и других браузерах).

Answer 1

OK. Для тех, у кого такая же проблема, похоже, вместо запуска «mousemove» IE8 должен запускать «onmousemove». Итак:

if (document.body.addEventListener) { 
    document.body.addEventListener('mousemove', mouseMoveHandler); 
} else { 
    document.body.attachEvent('onmousemove', mouseMoveHandler); 
}