Javascript: mousemove event handler not being triggered

Question

I'm working on a set of e-learning modules that must be accessible in IE8 (due to legacy hardware in the organisation).

Everything works fine in IE9>. In IE8 the mouseover event handler is not firing. Here's the relevant js:

$(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');
    }
}

And some VERY simplified html (with the image urls altered, obviously):

<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>

And finally the css that makes the image full size (there are also other rules that set overflow as hidden so the zoomed image doesn't cover any other elements):

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

I've included the class-adding js lines because I can see that THOSE lines ARE being applied - the class of the contained images changes and it zooms to full size. It's the mouseMoveHandler function that is NOT getting triggered so the images are not adjusting their position based on the mouse position.

OK, so my simple question, after all of that is WHY is the mousemove handler not triggering in IE8? (It works fine in 9+ and other browsers).

Answer 1

OK. For anyone having the same problem, it looks like, instead of triggering 'mousemove', IE8 needs to trigger 'onmousemove'. So:

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