Question

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

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

此接缝适用于Chrome和Firefox，但在IE上无法正常工作。

例如，在IE9上，突出显示不会出现在标记行等次要元素上，例如：javascript, html, dom或顶行，如：chat, meta, faq

当我将鼠标悬停在javascript标记上时，大div是高亮的，这是wrong，它应该是like we see in Firefox
在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的支持也是still unknown。任何不支持指针事件的浏览器都永远不会触发覆盖覆盖的元素上的mouseenter事件。

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

类似于this。

<强>更新

我没有对document.elementFromPoint()与pointer-events:none进行任何效果比较。当前的浏览器（Firefox，Chrome，...）可以同时处理两者，Internet Explorer只能使用document.elementFromPoint()方法。为了简单起见，我没有为现代浏览器实现备用pointer-events:none路由。

Answer 2

事实证明，在IE中，没有背景（即background: transparent）和Gradient filter集的元素不会接收鼠标事件。 Demo

这是一个令人高兴的巧合，因为您使用RGBa background colour作为叠加层，而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) { ... })
```
要查找target of the event，您需要访问event.srcElement而不是event.target。
正如rodneyrehm所说，Array.indexOf不受支持。

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

（顺便说一句，对于跨越多行的内联元素突出显示错误，例如“浏览其他问题...”行中的“提出您自己的问题”链接。）

Answer 3

使用Internet Explorer的特殊例程（在IE9中测试，未在IE8中测试），我提出了this。然而，它并不完美。当在同一元素内移动鼠标时，在例程运行多次时会发生闪烁（有时覆盖完全消失）。我希望尽快完善这一点。

例程：

我特意检查了浏览器是否为IE并执行了以下操作：
我将mousemove事件分配给使用document.elementFromPoint(x, y)。
我将mouseover分配给清算功能，立即删除叠加层。（这会导致闪烁并可能完全覆盖删除，即使鼠标仍在元素上。）

点函数元素

function ep(e)
{
    var ev = {target:document.elementFromPoint(e.clientX, e.clientY)};
    handler(ev);
}

清算功能

function clear(e)
{
   cur = null;
   overlay.style.display='none';
}

欢迎提供反馈和建议。我仍在努力，我将发布更新的JSFiddle链接。

Answer 4

您可以通过更改其属性来避免叠加层拦截鼠标事件，即通过使其透明并依赖outline，或者通过大小计算调整border：

background:transparent;
outline:1px dotted red;

Fiddle'd

或者，您可以不依赖覆盖，而是在“moused over”时切换元素本身的类。如果您缓存对它的引用，则可以在“moused out”，冲洗，重复时删除该类。我会更多地了解这个想法，看看它有多可行。

Answer 5

我快速浏览了你的小提琴，并分叉了一个适用于IE8的版本，to be found here。事实证明，indexOf，特别是与按位~的组合，IE似乎并不是那么喜欢，所以最快的修复似乎是一个简单的for(i=0;i<no.length;i++){}

如前所述，e.target在IE中不起作用，因为JScript调用此属性srcElement。这是有道理的，因为IE事件总是冒泡到文档，所以所有事件都有一个源，而不是一个目标。

最大的区别在于你的CSS：再次IE是一个痛苦：MS认为rgba由于某种原因是不好的。他们似乎更喜欢编写CSS，而地球上任何人都无法理解：

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0.3,startColorstr='#4c333333', endColorstr='#4c666666');

为您提供半透明的灰色叠加层。说实话，我发现了这段答案here。

当谈到指针事件时，绕过它的唯一方法是AFAIK，它是另一个处理onclick事件的事件监听器：

function noClick(e)
{
    e = e || window.event;
    if (e.preventDefault)
    {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    e.returnValue = false;
    e.cancelBubble = true;
    return false;
}

希望这可以帮助你...

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

5 个答案: