Question

当事件目标位于<img>元素上且缺少背景时，Internet Explorer不会触发onmousemove事件。

但它确实在目标具有背景时注册事件。有没有人对此有解释？我在IE10，IE9和IE8中有相同的行为。

Answer 1

OP询问原因，这是我的突破：

在视觉上更容易解释，所以首先让我们为img添加点击处理程序：

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

Fiddle

足够公平。您点击了Chrome / Firefox /非IE浏览器中的图片，因为绝对定位的div覆盖了它，所以不会发生任何事情。

现在在IE上试试吧。 img的点击处理程序被触发了！因此，它表明IE通过绝对定位的“透明”（无内容或背景）元素推送元素。更有趣的是，相对定位的元素遇到同样的问题，并且在两个/两个元素上设置z-index也不会解决它。当然，由于图像位于叠加层上方，因此不会触发叠加层的mousemove事件。

解决方法是为叠加层提供一些“填充”，例如background:rgba(0,0,0,0)将强制IE将绝对定位的元素保持在顶部。 Fiddle。如果您需要支持没有rgba支持的浏览器，请使用1x1px透明gif作为背景。

我从未在任何规范中看到这个定义，也没有正式报告为bug。没有内容或背景的绝对定位元素没有逻辑或理由遭受这个z索引问题，因此我将其称为另一个IE错误。也许在Microsoft forums上报告它会有用。

此外，相关问题：IE bug: absolutely-positioned element with a non-transparent background colour

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

在Internet Explorer中使用mousemove的问题

2 个答案: