Internet Explorer 中的 mousemove 问题答案

【问题标题】：Issue with mousemove in Internet ExplorerInternet Explorer 中的 mousemove 问题
【发布时间】：2013-01-13 23:54:39
【问题描述】：

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

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

在这里提琴： http://jsfiddle.net/xSpqE/2/

【问题讨论】：

+1 个有趣的问题。我知道这不是您所要求的，但是给覆盖层一个背景，例如background:rgba(0,0,0,0); 似乎可以在 IE10 预览中修复它。 fiddle
可以看到，在没有被图片覆盖的方框部分，文字确实更新了。
^ 其实恰恰相反。叠加层覆盖图像。带有背景的叠加层触发mousemove。更有趣的是，如果您将一些文本内容添加到叠加层而不对其应用任何背景样式，则仅当您将鼠标移到文本上方时才会触发 mousemove 事件。还有一个我以前从未遇到过的 IE 错误。我想我只是不经常使用mousemove。
正如您的问题所暗示的，position:absolute 及其下方的图片与问题直接相关。例如，覆盖部分位于图像上方的 fiddle 将表明，当您将位于绝对定位覆盖下方的图像悬停时，IE 仅无法触发 mousemove 事件。

标签： javascript internet-explorer

【解决方案1】：

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

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

$('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 上报告它会有用。

【讨论】：

how the img ends up above the absolutely positioned "transparent" div 我认为可能是当绝对定位的元素没有背景时，IE 认为它不存在。 IE 逻辑。 :(
@Derek 好吧，这就是我在上一段中得出的结论。没有内容和背景的元素就是我所说的“透明”，它们会遭受这个 z-index 错误。当我说“不知道”时，实际上我的意思是“我从未在任何规范中看到此定义，也从未正式报告为错误”。我想这是一个更好的陈述，将把它替换为答案。 =]
感谢您的澄清：')

【解决方案2】：

又一个 IE 失败了！这更像是一种解决方法而不是答案，但它似乎工作正常：

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

这是对$('.overlay').mousemove 函数的补充，所以也要保留它，当然is_ie 检查是可选的。

【讨论】：