在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检查是可选的。