Issue with highlighting page elements using mouseover and mouseout event listeners

Question

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.

Answer 1

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

Answer 2

try this code, when i tried it i didnt have to do the trick you did for textboxes:

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);

you are using this in html right? i dont know how this would behave in xul