Mouseover事件不会在IE9上为子元素进行粒化,事件不会在IE8上启动

Question

我们适应这里发表方法在小鼠上突出一个DOM元素,如检查不以不使用jQuery.

到目前为止,我们提出了这个解决方案:http://jsfiddle.net/pentium10/Q7ZQV/3/

这种接缝适用于Chrome和Firefox,但在IE上无法正常工作.

1. 例如,在IE9上,突出显示不会发生在像标记行这样的次要元素上:javascript, html, dom或者顶行如:chat, meta, faq

   当我鼠标悬停在javascript标签上时,大的div是高亮的,这是错误的,它应该像我们在Firefox中看到的那样

2. 在IE8和7上它没有启动,所以这是我们需要解决的另一个问题

Answer 1

我想我在你的实现中发现了问题.但在我们开始之前,您可能希望自己治愈第45行中出现的全局范围漏洞.有一个分号,您可能需要逗号:

var target = e.target,
    offset = findPos(target),
    width = target.offsetWidth;//target.outerWidth(),
    height = target.offsetHeight;//target.outerHeight();

您可能也有兴趣知道自IE9以来支持Array #indexOf,因此~no.indexOf(e.target)在IE8及以下版本中会失败.

现在你的问题.目前的浏览器(包括Firefox)都知道pointer-events:none.甚至IE10的支持仍然未知.任何不支持指针事件的浏览器都不会mouseenter在叠加层覆盖的元素上触发事件.

使用IE7 +支持document.elementFromPoint(),您可以绑定mousemove,隐藏图层,检测光标下方的元素,并mouseover在必要时触发.如果你走这条路,请考虑限制你的mousemove活动(见limit.js).

像这样的东西.

更新:

我还没有做过document.elementFromPoint()vs的性能比较pointer-events:none.目前的浏览器(Firefox,Chrome,...)都可以处理这两种情况,Internet Explorer只能使用这种document.elementFromPoint()方法.为了简单起见,我没有pointer-events:none为现代浏览器实现备用路由.

Answer 2

事实证明,在IE中,没有背景(即background: transparent)和渐变过滤器集的元素不会接收鼠标事件.演示

这是一个愉快的巧合,因为你正在使用RGBa背景颜色作为叠加层,而IE中RGBa颜色的变通方法之一就是渐变滤镜.

通过在叠加层上设置这些样式(对于IE):

background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
zoom: 1;

鼠标事件通过叠加层传递到底层元素,因此内部/次要元素会正确突出显示.

IE7/8中存在的其他问题:

• 使用时element.attachEvent,事件名称需要以"on"为前缀:

  document.body.attachEvent('onmouseover', function(e) { ... })
  

• 要查找事件的目标,您需要访问event.srcElement而不是event.target.

• 正如rodneyrehm所提到的,Array.indexOf不受支持.

所以这里有一个适用于IE 7-9的解决方案版本:http://jsfiddle.net/jefferyto/Q7ZQV/7/

(顺便说一句,对于跨越多行的内联元素,突出显示是错误的,例如"浏览其他问题..."行中的"询问您自己的问题"链接.)