使用mouseover和mouseout事件侦听器突出显示页面元素的问题 [英] Issue with highlighting page elements using mouseover and mouseout event listeners

问题描述

我正在创建一个Firefox扩展，通过单击所述元素，获取关于网页上元素的一些信息（比如元素的 id 属性）。我也想实现一个功能，在其中悬停的元素将突出显示它。

有一些现有的解决方案，基本上已经这样做。看起来，这些现有的解决方案（例如Firefox的Inspector工具中的Select mouse with mouse功能）基本上使用了两个事件监听器：

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

我试图使自己的使用这两个侦听器（ onmouseover 和 onmouseout ）的实现。突出显示的应用方式与本教程：当我们想要一个元素被突出显示时，我们为元素的<$ c添加一个 link-target-finder-selected 属性$ c> class 属性。将CSS文件的链接引用放入HTML文档的头中，并引用此CSS代码：

  .link-target-finder-selected {
 outline：2px solid red！important; 
 
 
 
 $ b $ p 
 $ b这个实现和我们想要的非常接近，但不幸的是，很少有（很可能是相关的）问题。
 
 
首先，使用文本框时，突出显示仅适用于鼠标位于文本框边框的情况。一旦移动到文本框的内部，显然触发了 mouseout 事件 - 突出显示消失，即使您或我很清楚鼠标是实际的仍然悬停在文本框上。看来我需要以某种方式强制            文本框。
 
 
 
其次，我有一个非常类似的问题与多选框。但是我也希望多选框的行为有些不标准。实际的行为是鼠标悬停会突出显示选择框;当您开始在选择框内移动时，突出显示将消失，然后选择框内的选项将在您移动时突出显示。相反，我希望我的附加功能可以在进入选择框后突出显示，除非鼠标离开整个框，否则没有其他内容会突出显示或突出显示。对于这个问题的解决方案应该基本上和文本框问题的解决方案一样。
 
 
 
请让我知道你是否有任何想法来解决这些问题。  
 
解决方案
我刚给了一个解决方案：
  https://stackoverflow.com/a/21598914/1828637  
 
 
 
我在我的插件中做了同样的事情，我希望很快就会发布。
 
 
 
当你移动到输入字段的中间时，mouseout事件不应该触发，这很奇怪。
 
 $ b $如果这真的发生，然后在鼠标悬停在输入字段上，然后添加一个MouseLeave事件，（与moustEnter事件相反）
 
 
这样还是给body添加事件listener for mouseoever，当一个元素是mousedover，那么它应该取消勾画先前选定的元素（这是为了鲁棒性），并应添加一个mouseleave事件，将取消它自己的轮廓。
 
 
  https://developer.mozilla.org/zh-CN/docs/DOM/DOM_event_reference/mouseenter  
 
I am creating a Firefox extension that gets some information about an element on a webpage (say, the element's id attribute), upon clicking said element. I also would like to implement a feature in which hovering over the element will highlight it.

There are some existing solutions that essentially already do this. It seems that these existing solutions (such the "Select element with mouse" feature in Firefox's "Inspector" tool) essentially make use of two event listeners:


A mouseover listener: Highlights whatever element you move your mouse over an element.
A mouseout listener: Removes the highlighting when you move your mouse off of an element. (Otherwise, as you move your mouse over the whole page, eventually everything will be highlighted!)


I have attempted to make my own implementation which uses those two listeners (onmouseover and onmouseout). The highlighting is applied in the same manner as the linktargetfinder in this tutorial: whenever we want an element to be highlighted, we add a link-target-finder-selected property to the element's class attribute. A link reference to the CSS file is put into the head of the HTML document and refers to this CSS code:
.link-target-finder-selected {
    outline: 2px solid red !important;
}
This implementation is very close to what we want, but unfortunately, there are a few (most likely related) issues.

First, with text boxes, the highlighting only applies when the mouse is on the border of the text box. Once you move into the interior of the text box, apparently the mouseout event is triggered -- the highlighting disappears, even though it is clear to you or me that the mouse is actually still hovering over the text box. It seems that I need to somehow force the mouseout event to not trigger until you move the mouse completely outside of the text box.

Second, I am having a very similar issue with multiple-select boxes. But I also want the behavior for multiple-select boxes to be somewhat nonstandard. The actual behavior is that a mouse-over will highlight the select box; the highlight will disappear as you begin to move inside the select box, and then the options within the select box will get highlighted as you move over them. Instead, I would like my add-on to function such that, upon entering the select box, the box will be highlighted, and nothing else will be highlighted or highlighted until the mouse leaves the entire box. The solution to this should essentially be the same as the solution to the text box issue.

Please let me know if you have any ideas for how I can fix these issues.
解决方案
I just gave a solution to this:
https://stackoverflow.com/a/21598914/1828637

I do the same thing in my addon which i hope to release soon.

the mouseout event should not trigger when you move into the middle of a input field, thats weird.

if that really happens then on mouseover the input field, then add a MouseLeave event, (opposite of moustEnter event)

so still to the body add the event listener for mouseoever, and when an element is mousedover then it should un-outline the previously selected element (this is for robustness) and should add a mouseLeave event that will un-outline itself.

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

                        
这篇关于使用mouseover和mouseout事件侦听器突出显示页面元素的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！