javascript - Internet Explorer 中的 mousemove 问题

Question

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

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

score 2 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

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

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

2 回答 2