Javascript：mousemoveイベントハンドラーがトリガーされていません

Question

私はIE8でアクセス可能でなければならないeラーニングモジュールのセットを取り組んでいます（組織内のレガシーハードウェアのため）。

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と、明らかに）：ここでは、関連するJSだ画像のフルサイズを作る

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

Iは、クラス追加JS株を含めました - Cを含まれている画像の鮮やかさが変わり、フルサイズに変わります。画像がマウスの位置に基づいて位置を調整しないようにトリガーされないのはmouseMoveHandler関数です。

OK、私の簡単な質問は、そのすべての後に、なぜmousemoveハンドラはIE8でトリガされないのですか？ （これは9+や他のブラウザでうまく動作します）。

Answer 1

OK。 IE8は同じ問題を抱えている人のために、 'mousemove'をトリガーする代わりに、 'onmousemove'をトリガーする必要があるようです。従って：

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