javascript - 鼠标悬停事件不会在 IE9 上针对子元素进行细化，事件不会在 IE8 上启动

Question

我们正在调整此处发布的方法 highlight a DOM element on mouse over, like inspect does 不要使用 jQuery。

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

这似乎可以在 Chrome 和 Firefox 上运行，但在 IE 上无法正常运行。

1. 例如，在 IE9 上，突出显示不会出现在次要元素上，例如标记行，例如:javascript, html, dom 或顶行，例如:chat, meta,常见问题

   当我将鼠标悬停在 javascript 标签上时，大 div 会高亮显示，这是 wrong它应该是like we see in Firefox

2. 在 IE8 和 7 上无法启动，这是我们需要解决的另一个问题

Answer 1

我想我在您的实现中发现了问题。但在我们开始之前，您可能想解决第 45 行中出现的全局范围泄漏问题。有一个分号，您可能需要一个逗号:

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

您可能也有兴趣了解 Array#indexOf自 IE9 起支持，因此 ~no.indexOf(e.target) 在 IE8 及以下版本中会失败。

现在解决你的问题。当前的浏览器(包括 Firefox)知道 pointer-events:none。连IE10的支持都是still unknown .任何不支持指针事件的浏览器都永远不会在覆盖层覆盖的元素上触发 mouseenter 事件。

支持 IE7+ document.elementFromPoint()您可以绑定(bind)到 mousemove，隐藏图层，检测光标下方的元素，必要时触发 mouseover。如果您走这条路，请考虑限制您的 mousemove 事件(参见 limit.js )。

类似于 this .

更新:

我还没有对 document.elementFromPoint() 与 pointer-events:none 进行任何性能比较。当前的浏览器(Firefox、Chrome 等)可以处理这两种情况，Internet Explorer 只能使用 document.elementFromPoint() 方法。为了简单起见，我没有为现代浏览器实现替代的 pointer-events:none 路由。