Question

我正在开发一套必须在IE8中访问的电子学习模块（由于组织中的传统硬件）。

IE9中的一切正常＆gt;。在IE8中，mouseover事件处理程序未触发。这是相关的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函数，因此图像不会根据鼠标位置调整其位置。

好的，所以我的简单问题，毕竟这是为什么鼠标移动处理程序不能在IE8中触发？（它在9+和其他浏览器中工作正常）。

Answer 1

行。对于任何有相同问题的人来说，看起来，IE8不需要触发“鼠标移动”，而是需要触发“onmousemove＆＃39;”。所以：

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

Javascript：mousemove事件处理程序未被触发

1 个答案: