Javascript 使用mouseover和mouseout事件侦听器突出显示页面元素时出现问题

我正在创建一个Firefox扩展，它可以在单击某个网页元素时获取该元素的一些信息（比如，该元素的

id

属性）。我还想实现一个特性，将鼠标悬停在元素上会突出显示它

现有的一些解决方案基本上已经做到了这一点。这些现有解决方案（如Firefox“Inspector”工具中的“使用鼠标选择元素”功能）基本上使用了两个事件侦听器：

• mouseover

  listener：突出显示在元素上移动鼠标的任何元素

• mouseout

  侦听器：当您将鼠标移离某个元素时，将删除突出显示。（否则，当您在整个页面上移动鼠标时，最终所有内容都将突出显示！）

我尝试使用这两个侦听器（

onmouseover

和

onmouseout

）来实现我自己的实现。高亮显示的应用方式与中的linktargetfinder相同：每当我们希望高亮显示一个元素时，我们都会向元素的

类

属性添加一个

linktargetfinder selected

属性。CSS文件的

链接

引用被放入HTML文档的

标题

，并引用此CSS代码：

.link-target-finder-selected {
    outline: 2px solid red !important;
}

这个实现非常接近我们想要的，但不幸的是，存在一些（很可能是相关的）问题

首先，对于文本框，高亮显示仅在鼠标位于文本框的边框上时应用。一旦移动到文本框的内部，显然会触发

mouseout

事件——高亮显示将消失，即使您或我很清楚，鼠标实际上仍悬停在文本框上。似乎我需要以某种方式强制

mouseout

事件不触发，直到您将鼠标完全移出文本框

第二，我有一个非常类似的问题，多个选择框。但我也希望多个选择框的行为有点不标准。实际的行为是鼠标悬停在选择框上会高亮显示；当您开始在选择框内移动时，高亮显示将消失，然后当您移动到选择框内的选项时，这些选项将高亮显示。相反，我希望我的插件能够在进入选择框时高亮显示该框，并且在鼠标离开整个框之前，不会高亮显示或高亮显示任何其他内容。这个问题的解决方案基本上应该与文本框问题的解决方案相同

---

如果您对如何解决这些问题有任何想法，请告诉我。

我刚刚给出了一个解决方案：

我在我的插件中也做了同样的事情，我希望很快发布

当您移动到输入字段的中间时，不应该触发mouseout事件，这很奇怪

如果确实发生这种情况，则在输入字段上方的鼠标上添加一个MouseLeave事件（与moustEnter事件相反）

因此，仍然要在主体中添加mouseoever的事件侦听器，当一个元素被mouseoever覆盖时，它应该取消对先前选择的元素的大纲（这是为了健壮性），并且应该添加一个mouseLeave事件，该事件将取消对自身的大纲

---

试试这段代码，当我尝试它时，我不必像你对文本框所做的那样：

var lastBoxedEl;

function moused(e) {
    var target = e.target; //experiment, try e.currentTarget, e.originanalTarget
    if (lastBoxedEl) {
        lastBoxedEl.style.outline = 'none'
    }
    lastBoxedEl = target;
    target.style.outline = '5px solid red';
}
document.body.addEventListener('mouseover', moused, false);

---

你在html中使用这个，对吗？我不知道这会在xul中表现如何

谢谢你关于mouseleave的建议！我只知道mouseover和mouseout。不过，我并没有使用鼠标听筒。相反，在mouseover事件中，我检查元素是否是文本框；如果是这样，我将禁用mouseover和mouseout侦听器，并向该元素添加mouseleave侦听器。然后，mouseleave侦听器执行相反的操作：它删除自身，并重新启用mouseover和mouseout侦听器。现在，文本框将正确高亮显示。另外，我不知道您可以使用

.style.outline

直接设置大纲；这也有帮助。谢谢我很乐意，我喜欢设置轮廓，而不是边框，因为轮廓不会影响周围的对象，比如它不会改变偏移量offsetLeft或OffsetLight或offsetWidth，我猜，如果我在它周围设置边框，它会移动。你确定要为文本框这样做吗？我只是测试我贴在那边主题上的代码，我不必为文本框做那个把戏。我会在下面再次发布代码。我使用的代码本质上是相同的，而且我的计算机上的文本框需要“技巧”。我在Windows7企业版上使用Firefox24.0（是的，已经过时了，但有一个原因…）。您使用什么来删除突出显示？它是一个

mouseout

事件侦听器吗？这就是我所用的；我不认为您希望使用

mouseleave

侦听器来突出显示所有元素，因为您经常会一次突出显示多个元素。在上面的代码中，如果您将其复制粘贴到scratchpad中，请尝试一下。在一个元素的mouseover上，它取消勾勒出最后一个选定的元素，然后勾勒出新的元素。我使用全局变量lastBoxedEl来实现这一点。我想你不希望这个mouseOver一直被连接，所以当你移除mouseOver事件监听器时，只需取消勾勒出最后一个勾勒出的元素。这件事发生在ff24中是如此有趣，我有一段时间得给它做个测试，它很奇怪，我不应该看到这种情况；我使用了一个

mouseover

事件来取消高亮显示之前高亮显示的元素。看来这就是问题的原因。当我使用您的代码（它在

鼠标悬停

事件中执行所有操作）时，没有问题。但是有一个单独的用于突出显示的

mouseover

事件和一个用于取消突出显示的

mouseout

事件会导致各种问题，包括我前面提到的文本框问题。我将尝试将