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

Question

我正在创建一个 Firefox 扩展程序，该扩展程序在单击该元素时获取有关网页上某个元素的一些信息（例如，该元素的 id 属性）。我还想实现一个功能，将鼠标悬停在元素上会突出显示它。

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

• mouseover 监听器：突出显示您将鼠标移到元素上的任何元素。
• mouseout 侦听器：当您将鼠标从元素上移开时移除突出显示。 （否则，当您将鼠标移到整个页面上时，最终所有内容都会突出显示！）

我尝试使用这两个侦听器（onmouseover 和onmouseout）制作自己的实现。突出显示的应用方式与this tutorial 中的linktargetfinder 相同：每当我们想要突出显示元素时，我们将link-target-finder-selected 属性添加到元素的class 属性中。对 CSS 文件的 link 引用放入 HTML 文档的 head 并引用此 CSS 代码：

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

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

首先，对于文本框，仅当鼠标位于文本框的边框上时才会突出显示。一旦你进入文本框的内部，显然mouseout 事件被触发——突出显示消失了，即使你或我很清楚鼠标实际上仍然悬停在文本框上。看来我需要以某种方式强制mouseout 事件不触发，直到您将鼠标完全移出文本框。

其次，我在多选框方面遇到了非常相似的问题。但我也希望多选框的行为有点不标准。实际行为是鼠标悬停将突出显示选择框；当您开始在选择框内移动时，突出显示将消失，然后选择框中的选项将在您移过它们时突出显示。相反，我希望我的插件能够在输入选择框时突出显示该框，并且在鼠标离开整个框之前不会突出显示或突出显示其他任何内容。这个问题的解决方法应该和文本框问题的解决方法基本一样。

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

Answer 1

试试这个代码，当我尝试它时，我不必做你为文本框做的把戏：

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 中会如何表现

Answer 2

我刚刚给出了一个解决方案： https://stackoverflow.com/a/21598914/1828637

我在我希望尽快发布的插件中做同样的事情。

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

如果确实发生了这种情况，那么在鼠标悬停输入字段时，添加一个 MouseLeave 事件，（与 moustEnter 事件相反）

所以仍然在正文中添加 mouseoever 的事件侦听器，当一个元素被 mousedover 时，它应该取消勾画先前选择的元素（这是为了健壮性）并且应该添加一个 mouseLeave 事件，该事件将取消勾画自身。

https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mouseenter