What event to use instead of onmouseout to run when mouse is not over the element?

Question

i want to run a script when i'm not hovering an element. It's some kind of deactivating something else that was run previously in 'onmouseover' event. So I'm using onmouseout event to run this script, however , the problem is that if i don't hover the element and then leave it , the script just don't run. this happens if e.g hover the element too fast or the window loses focus . How can i solve that?

EDIT: let me illustrate this in another way , what i need is an event to be run when an element isn't touched by mouse.

not detecting hover if the mouse moves too fast isn't possible unless you track the mouse movement manually and trigger all your hovers yourself. Then you can add linear interpolation to check the mouse cursor movement between frames and compute all onMouseX events. — John Dvorak, Nov 01 '12 at 19:42
well , maybe i don't want to detect hover here, i want to check whether mouse is over or not — Ahmed Elyamani, Nov 01 '12 at 19:43
if `onMouseOut` is lost due to fast movement, then so is `onMouseOver`, so you can track your state properly. — John Dvorak, Nov 01 '12 at 19:43
You probably want to run the same script that runs on `onMouseOut` on script load as well. — John Dvorak, Nov 01 '12 at 19:45
right, but what happens here is that i enter the elements normally but leave them very fast .. — Ahmed Elyamani, Nov 01 '12 at 19:45
Then their `onMouseOut` event shall trigger, albeit possibly in incorrect order (new elements are entered before old elements are left) — John Dvorak, Nov 01 '12 at 19:46
"(new elements are entered before old elements are left)" this is exactly what happens ! — Ahmed Elyamani, Nov 01 '12 at 19:47
`onMouseOut` shall trigger when the mouse cursor leaves the element (i.e. was inside and isn't). — John Dvorak, Nov 01 '12 at 19:48
I don't think the event order will be reversed (over before out) contrary to expectations but you can't expect much from IE8 — John Dvorak, Nov 01 '12 at 19:50

score 2 · Answer 1 · answered Nov 01 '12 at 19:54

2

you can try this,

<div id="div1" onmouseover="fucntionIn()" onmouseout="functionOut()">"Special Area"</div>
<div id="div2" onmouseover="fucntionOut()">Other area</div>

the logic is to write deactivate code for onmouseover event of other area of the page.

answered Nov 01 '12 at 19:54

Lasantha Bandara

809
3
10
22

i like your logic, however, the deactivation code must run for that element that had run the activation code . – Ahmed Elyamani Nov 01 '12 at 19:56
hmmm.... then you have to set an attribute when you deactivate an element. then select the element using document.getElementById(). and check whether it is activated using the attribute. if it is activated, deactivate it. – Lasantha Bandara Nov 01 '12 at 20:06
"check whether it is activated" in what event? – Ahmed Elyamani Nov 01 '12 at 20:09
You can use Jquery to do this type of things very easily. Check this out. http://api.jquery.com/attr/#attr2 – Lasantha Bandara Nov 01 '12 at 20:10
I have written the sample code here (http://jsfiddle.net/XGunn/). Does it work for you? – Lasantha Bandara Nov 01 '12 at 20:50

score 1 · Answer 2 · answered Nov 01 '12 at 19:49

1

What if you detect onmouseover on the whole page (through event bubbling), and when it enters a new element find if the original element that you last observed is a parent of the current target element, if it is not then you know it exited the original DOM node, even if onmouseout did not fire.

answered Nov 01 '12 at 19:49

Matt

41,216
30
109
147

I don't think the browser will ever forget to fire the `onmouseout` event after `onmouseover` is triggered – John Dvorak Nov 01 '12 at 19:51
1

@JanDvorak while I would like to think so, I've seen similar expectations shattered when altering the DOM is involved. While that doesn't seem like the case here, it should be noted that such assumptions are not always valid (see http://stackoverflow.com/questions/2732818/if-you-delete-a-dom-element-do-any-events-that-started-with-that-element-contin) – Matt Nov 01 '12 at 19:53
Interesting link. I shouldn't be surprised IE did something wrong ;-) – John Dvorak Nov 01 '12 at 19:58

What event to use instead of onmouseout to run when mouse is not over the element?

2 Answers2

Linked