在Internet Explorer中mousemove存在问题

Question

当事件目标位于一个没有背景的 <img> 元素上时，Internet Explorer不会触发 onmousemove 事件。

但是如果该目标有背景，则会注册该事件。有人能解释一下这是为什么吗？我在 IE10、IE9 和 IE8 中遇到了相同的行为。

这里是 Fiddle 链接： http://jsfiddle.net/xSpqE/2/

- Jack

---

+1 有趣的问题。我知道这不是你要求的，但是给覆盖层添加一个背景色，例如 background:rgba(0,0,0,0);，似乎可以在IE10预览版中修复它。fiddle - Fabrício Matté

你可以看到在图像未覆盖的框的部分，文本确实有更新。 - kenstone

实际上是相反的。覆盖层覆盖在图像上方。带有背景的覆盖层会触发 mousemove 事件。更有趣的是，如果你在覆盖层中添加一些文本内容而不应用任何背景样式，那么只有当你将鼠标移动到文本上方时才会触发 mousemove 事件。这是我以前从未遇到过的另一个 IE bug。我想我很少使用 mousemove。 - Fabrício Matté

正如你的问题所暗示的那样，position:absolute 与其下方的图像直接相关。例如，这个 fiddle 中，当覆盖层部分悬浮在图像上方时，IE 只有在鼠标悬停在绝对定位的覆盖层下方的图像上时才无法触发 mousemove 事件。 - Fabrício Matté

Answer 1

由于OP要求解释原因，这是我的突破口：

为了更容易理解，首先让我们给添加一个点击处理程序：

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

Fiddle

说得好。如果在Chrome/Firefox/not-IE浏览器中单击图像，什么都不会发生，因为绝对定位的

盖住了它。

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

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

我从未在任何规范中看到过这个定义，也从未被正式报告为错误。对于没有内容也没有背景的绝对定位元素出现这种z-index问题没有逻辑或理由，因此我将其称为又一个IE bug。也许在Microsoft论坛上报告它会有所用处。

还有一个相关的问题：IE bug: absolutely-positioned element with a non-transparent background colour

- Fabrício Matté

---

怎么图片会出现在完全定位的“透明”div之上，我认为可能是当绝对定位的元素没有背景时，IE认为它不存在。IE的逻辑。:( - Derek 朕會功夫

@Derek 嗯，是的，这就是我在上面段落中得出的结论。没有内容和背景的元素是我所谓的“透明”的，它们会遇到这个z-index的bug。当我说“不知道”时，实际上是指类似于“我从未见过任何规范中定义过，也从未被正式报告为错误”。我想这是一个更好的陈述，将用这个替换答案中的那个。=] - Fabrício Matté

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

- n_i_c_k