+ 2

How to handle onmouseout conflict?

I have div and inside div, i have an image and an input box. when the mouse is over on the image then function fun1() run which increases the width of the input box but there is another one function fun2() which runs whenever my mouse is out from div. It runs and decreases the length of the input box but the problem is that when my mouse is over on input box then fun2() is also run it think that mouse pointer is out from div but actually pointer is inside the div. How i can correct this.

html css javascript python input events jquery div

8th Mar 2020, 11:48 AM

Maninder $ingh

2 Answers

+ 3

I'm not sure I understand your problem specifically but you do have two ways of dealing with multiple event handlers firing: First of all, the innermost event handler always goes first, so if your html looks like <body><div><img /></div></body> The img onmouseout event handler fires first and the event bubbles upwards, the div handler will fire next, and then the body handler. Unless you explicitly specify that you want your event handler to run during the "capturing phase". (Sololearn has a lesson on that). So more accurately, this is the order in which the event handlers fire: body (capturing) > div (capturing) > img (capturing) > img (bubbling) > div (bubbling) > body (bubbling) If you want to register an event handler during capturing phase, addEventListener has a third parameter: body.addEventListener('mouseout', () => { ... }, true); The default is false, which means the event handler runs in the bubbling phase. If anywhere inside the event chain you want to stop the event from going any further, you can, for example body.addEventListener('mouseout', evt => { evt.stopPropagation(); }, true); So even if you `img.addEventListener('mouseout')` the image handler will never run because the body capturing handler will run first and it stops the event from propagating. I hope that makes sense! You can usually resolve any event handler issues using a combination of those two tools (capturing, stopPropagation).

8th Mar 2020, 1:28 PM

Schindlabua