onmouseout behavior in js and html

Question

<a href="/somewhere" onmouseout="someFunction()">blah blah blah<img src="blah.jpg"></a>

In the above link, I have someFunction() firing when the mouse leaves the link. Seems straight forward. But when I hover over the image 'blah.jpg' the onmouseout event also fires. This is not desirable because 'blah.jpg' is in fact in the a node. The same thing happens if i have a div inside the a node, or any other html element other than straight text: javascript considers this to be out of the a node. Is there a way to stop these events from improperly firing? The described behavior is in chrome and ff on win7.

*update: if there is a jquery solution, do tell

Why would click-related event like `mouseup` help the OP when he's trying to use `mouseout`? — Rory McCrossan, Apr 21 '12 at 20:34
Perhaps evaluate whether the `mouseout` is triggered by moving to a `childNode`? I'm not sure exactly how, though, in plain JavaScript. — David Thomas, Apr 21 '12 at 20:35
@RoryMcCrossan It wouldn't if mouseout is really needed but can't the image be moved outside the tag? I might be missing something but isn't this the desirable behaviour? — DanS, Apr 21 '12 at 20:38
If the image still needs to be clickable, what about putting both inside different tags and having the onmouseout only on the text? — DanS, Apr 21 '12 at 20:40
@DanS my total desired effect is to have the onmouseout event fire only when the mouse leaves the `a` node and all it's children. Currently it is firing when it hovers over childNodes inside the a node. Not sure how your solution accomplishes this, perhaps I don't understand. — Colin Brogan, Apr 22 '12 at 23:52

score 2 · Answer 1 · answered Apr 21 '12 at 20:43

2

You can do that by verifying the the node type. Try

onmouseout="if ((event.relatedTarget || event.toElement) == this.parentNode) someFunction()"

answered Apr 21 '12 at 20:43

Shehzad

2,870
17
21

This will most likely work, but should really go in it's own handler. Having it in an `on-` attribute gives me nightmares. – Rory McCrossan Apr 21 '12 at 20:50
Also, that's is definitely not cross-browser. – Florian Margaine Apr 21 '12 at 21:06

score 0 · Accepted Answer · answered Apr 23 '12 at 01:18

Similar in concept to shehzad, so I voted him up. Should work cross-browser. in html:

onmouseout='out(this)'

in js (with included jquery file):

out(thisRef) {
   var newHover = event.relatedTarget || event.toElement;
   if(!jQuery.contains(thisRef,newHover) && !(thisRef==newHover)) {
        someFunction();
   }

}

onmouseout behavior in js and html

2 Answers2