在Internet Explorer中使用mousemove的問題

Question

當事件目標位於<img>元素上且缺少背景時，Internet Explorer不會觸發onmousemove事件。

但它確實在目標具有背景時注冊事件。 有沒有人對此有解釋？ 我在IE10，IE9和IE8中有相同的行為。

在這里小提琴： http ： //jsfiddle.net/xSpqE/2/

Answer 1

OP問起一個原因，這是我的突破：

這在視覺上更容易解釋，所以首先讓我們為img添加一個點擊處理程序：

$('img').click(function() {
  $('.pageX').text('img clicked!');
});

小提琴

很公平。 您單擊Chrome / Firefox /非IE瀏覽器中的圖像，因為絕對定位的div覆蓋它，所以不會發生任何事情。

現在在IE上試試吧。 img的點擊處理程序被觸發了！ 因此，它表明IE通過絕對定位的“透明”（無內容或背景）元素推送元素。 更有趣的是，相對定位的元素遇到相同的問題，並且在任一/兩個元素上設置z-index也不會解決它。 當然，由於圖像位於疊加層上方，因此不會觸發疊加層的mousemove事件。

解決方法是為疊加層提供一些“填充”，比如background:rgba(0,0,0,0)將強制IE將絕對定位的元素保持在頂部。 小提琴 。 如果您需要支持沒有rgba支持的瀏覽器，請使用1x1px透明gif作為背景。

我從來沒有在任何規范中看到這個定義，也沒有正式報告為bug。 沒有內容或背景的絕對定位元素沒有邏輯或理由遭受這個z索引問題，因此我將其稱為另一個IE錯誤。 也許在微軟論壇上報道它會有用。

另外，相關問題： IE bug：絕對定位元素，背景顏色不透明

Answer 2

又一個IE失敗了！ 這是一個解決方法而不是一個答案，但它似乎工作正常：

var is_ie = $.browser.msie;
if(is_ie){
    $('.main img').mousemove(function(e){
        $('.pageX').text('pageX: '+e.pageX);
    }
}

除了$('.overlay').mousemove函數之外，所以也要保留它，當然is_ie檢查是可選的。