Javascript:未触发 mousemove 事件处理程序

Question

我正在开发一组必须可以在 IE8 中访问的电子学习模块(由于组织中的旧硬件)。

在 IE9 中一切正常>。在 IE8 中，鼠标悬停事件处理程序不会触发。相关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');
    }
}

还有一些非常简化的 html(显然，图像网址已更改):

<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

好的。对于遇到同样问题的人来说，IE8 看起来需要触发“onmousemove”，而不是触发“mousemove”。所以:

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