Question

我正在创建一个Firefox扩展，在点击所述元素后，可以获取有关网页上元素的一些信息（例如，元素的id属性）。我还想实现一个功能，在该功能上悬停在元素上会突出显示它。

有一些现有的解决方案基本上已经这样做了。似乎这些现有的解决方案（例如＆＃34;选择带有鼠标的元素＆＃34;功能在Firefox＆＃34; Inspector＆＃34;工具中）基本上使用了两个事件监听器：

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

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

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

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

如果确实发生了鼠标悬停在输入字段上，则添加MouseLeave事件（与moustEnter事件相反）

所以仍然为body添加mouseoever的事件监听器，当一个元素被mousedover时，它应该取消前面选择的元素的轮廓（这是为了健壮性）并且应该添加一个将取消自我概述的mouseLeave事件。

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

Answer 2

尝试此代码，当我尝试它时，我没有必要为文本框做的伎俩：

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

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

2 个答案: