parent node receives unwanted mouseout from child nodes

Question

i have the following divs:

<div id="scrollable">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
</div>

I'm attaching event handlers to the #scrollable div - mouseover, mousedown mouseup in order to implement a scrolling effect with the mouse dragging the div. the problem is that i get mouseout for the #scrollable div whenever the mouse moves between the two divs while remaining inside the div. So the mouse is inside the @scrollable div but just move from item1 to item2 - and this breaks my dragging...

Is there a way to circumvent this behavior ?

Answer 1

What is happening is that you are not handling these events in the inner divs, so they bubble up to the parent. One way would be to add an event handler to the children and suppress that event so that this doesn't happen.

Regards