Javascript 鼠标悬停事件不发生'；t在IE9上对子元素进行颗粒化，事件不'；不要从IE8开始

我们正在调整此处发布的方法，以不使用jQuery

到目前为止，我们提出了这个解决方案：

这项技术可以在Chrome和Firefox上使用，但在IE上却没有预期的效果

例如，在IE9上，突出显示不会出现在小元素上，如标记行：

javascript、html、dom

或顶行：

chat、meta、faq

当我将鼠标移到javascript标记上时，大div是高亮的，这是并且应该是

在IE8和IE7上，它不会启动，所以这是我们需要解决的另一个问题

---

我为InternetExplorer使用了一个特殊的例程（在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';
}

---

欢迎反馈和建议。我仍在研究这个问题，我将发布更新的JSFIDLE链接。

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

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

您可能还想知道它是受支持的，因为IE9所以

~no.indexOf（e.target）

在IE8及以下版本中会失败

现在谈谈你的问题。当前浏览器（包括Firefox）知道

指针事件：无

。甚至IE10的支持也是如此。任何不支持指针事件的浏览器都不会在覆盖所覆盖的元素上触发

mouseenter

事件

有了IE7+的支持，您可以绑定到

mousemove

，隐藏图层，检测光标下方的元素，必要时启动

mouseover

。如果你沿着这条路走下去，请考虑节流你的<代码> MuMeMoo< <代码>事件（参见）。 差不多

更新：

---

我没有对

document.elementFromPoint（）

与

指针事件进行任何性能比较：无。当前的浏览器（Firefox、Chrome等）可以同时处理这两个问题，Internet Explorer只能使用
document.elementFromPoint（）
方法。为了简单起见，我没有为现代浏览器实现备用的
指针事件：none
路由。
您可以通过更改覆盖的属性来避免鼠标事件被拦截，即通过使其透明并依赖于
大纲
，或者通过调整大小计算，
边框
：

background:transparent;
outline:1px dotted red;


或者，您不能依赖覆盖，而是在“鼠标悬停”时切换元素本身上的类。如果缓存对该类的引用，则可以在“鼠标移出”时删除该类，然后进行清洗，然后重复。我将进一步讨论这个想法，看看它有多可行。
事实证明，在IE中，没有背景的元素（即
background:transparent
）和集合不会接收鼠标事件

这是一个令人高兴的巧合，因为你正在使用一个用于覆盖的渐变滤镜，IE中RGBa颜色的一个变通方法是渐变滤镜

通过在覆盖上设置这些样式（对于IE）：

鼠标事件通过覆盖并到达基础元素，因此内部/次要元素正确高亮显示

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


使用时，事件名称需要加上前缀“on”：


要查找，您需要访问
event.srcement
，而不是
event.target

正如rodneyrehm提到的，
Array.indexOf
不受支持


下面是一个同样适用于IE 7-9的解决方案版本：

（顺便说一句，对于跨多行的内联元素，突出显示是错误的，例如“浏览其他问题…”行中的“询问您自己的问题”链接。）
我快速查看了您的小提琴，并推出了一个适用于IE8的版本。事实证明，
indexOf
，尤其是与按位
~
组合使用时，IE似乎并不那么喜欢它，因此最快的解决方法似乎是对其进行简单的
（i=0；iSee:在IE9中，高亮显示确实出现在JavaScript标记上。从左侧开始，沿着标记的方向向右移动。然后，标记被高亮显示。似乎覆盖层阻止了“悬停事件”在IE9和IE10中传播。您可以使用spoon.net在不同的浏览器中进行测试。IE8给出以下消息：
消息：“clientX”为null或不是对象行：59 Char:5
根据，IE4及以上版本支持它。如果更改元素的背景，所包含元素的任何
背景：继承
科迪恩？这看起来可能会令人困惑…@rodneyrehm:color的初始值是
透明的
——而且很少有情况下
继承
会是一个更好的选择。我知道，我只是指出，在某些情况下，这种方法可能会失败。我喜欢网站上的
背景：透明的
想法不过，覆盖。我不确定性能是否优于
display:none
。目前不知道如何可靠地对其进行基准测试：/事实证明，客户端希望此功能在移动/平板电脑上运行
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;

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

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

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