12

我们正在调整此处发布的方法，在鼠标悬停时突出显示 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 上它无法启动，所以这是我们需要修复的另一个问题

4

5 回答 5

12

我想我在您的实施中发现了问题。但在我们开始之前，您可能希望解决第 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 的支持仍然未知。任何不支持指针事件的浏览器都不会mouseenter在覆盖层覆盖的元素上触发事件。

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

像这样的东西。

更新：

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

于 2012-06-17T16:00:55.870 回答
9

事实证明，在 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/

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

于 2012-06-20T08:13:29.743 回答
2

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

常规：

  • 我专门检查了浏览器是否为 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 链接。

于 2012-06-17T15:28:21.890 回答
1

You could avoid the mouse events being intercepted by the overlay by changing its properties, namely by making it transparent and relying on outline or, with size calculation adjustments, border:

background:transparent;
outline:1px dotted red;

Fiddle'd

Alternatively, you could not rely on an overlay but instead toggle a class on the element itself whenever "moused over". If you cache the reference to it, you could then remove the class when "moused out", rinse, repeat. I'll fiddle with the idea for a little bit more to see how viable it is.

于 2012-06-18T02:41:39.697 回答
0

我快速浏览了您的小提琴，并分叉了一个适用于 IE8 的版本，可在此处找到。事实证明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');

给你一个半透明的灰色覆盖。老实说，我在这里找到了我的答案。

当涉及到指针事件时，唯一的方法，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;
}

希望这对您有所帮助...

于 2012-06-20T11:55:00.673 回答