Javascript：mousemove事件處理程序未被觸發

我正在研究一組必須可在IE8中訪問的電子學習模塊（由於組織中的傳統硬件）。Javascript：mousemove事件處理程序未被觸發

一切工作正常在IE9>。在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（與圖像的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線，因爲我可以看到正被應用於那些線 - 與c所包含圖像的殘留變化，並將其放大爲全尺寸。它是沒有被觸發的mouseMoveHandler函數，因此圖像不會根據鼠標位置調整它們的位置。

好的，所以我的簡單問題，畢竟這是爲什麼鼠標移動處理程序不在IE8中觸發？（它可以在9+以及其他瀏覽器中正常運行）。

來源

2016-06-23 moosefetcher

'mousemouse''mouseover'和'mousemove'都是不同的東西，而且你已經輸入了它們三個。您的代碼的其他部分是否存在拼寫錯誤？以防萬一。我只能在代碼中看到'mousemove'。 –

對不起！錯誤更正（我希望），是的，我有文檔類型聲明。我不想包含整個HTML頁面，因爲它很長，我不想讓人們閱讀！ – moosefetcher

不需要道歉。我其實希望找到一個錯字可能會解決你的問題:) –

好的。對於任何有同樣問題的人來說，IE8需要觸發'onmousemove'，而不是觸發'mousemove'。所以：

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

來源

2016-06-24 08:31:55 moosefetcher

Javascript：mousemove事件處理程序未被觸發

回答

相關問題