javascript - Internet Explorer 中的 mousemove 问题

Question

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

但是当目标有背景时它会注册事件。有人对此有解释吗？我在 IE10、IE9 和 IE8 中有相同的行为。

在这里 fiddle : http://jsfiddle.net/xSpqE/2/

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 作为背景。

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

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