Duplicate onmouseover / onmouseout calls for the li tag

I have the following code. (You can copy it into a file to debug in Firefox, and see the outputs in the Console Tab in Firebug).

When I add onmouseover envent to the li tags, and move the mouse into the li area, the console info comes out.

The problem is when I moving the mouse from the image (Google logo) to the text under it, multiple info are print out. Why does the onmouseout event triggered, since I don't leave the li area?

What should I do to prevent triggering the onmouseout events in this situation.

Thank you!!

<html>
<body>

<div>
    <ul>
        <li onmouseover="console.info('over')" onmouseout="console.info('out')" style="float:left;display:block;width:30%;height:200px;border: 2px solid red;">
            <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">
            <br/>
            <br/>
            <a href="#">Google</a>
        </li>
        <li style="float:left;display:block;width:30%;">
            <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">
            <br/>
            <br/>
            <a href="#">Google</a>
        </li>
        <li style="float:left;display:block;width:30%;">
            <img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">
            <br/>
            <br/>
            <a href="#">Google</a>
        </li>
    </ul>
</div>

</body>
</html>

Solution

Events bubble up the DOM tree. So when the cursor leaves the img element, a mouseout event is generated and triggers the event handler bound to the parent li element.

There are two ways you can deal with this situation:

Prevent the event from bubbling

If you want to prevent the event from bubbling up, you assign an event handler to the element the event originates and call the event object's stopPropagation method (or cancelBubble property in IE):

function handler(event) {
    event = event || window.event; // IE
    if(event.stopPropagation) {
        event.stopPropagation();   // W3C
    }
    else {
        event.cancelBubble = true; // IE
    }
}

The problem is that you have to bind this handler to every child element, which is not very convenient. Therefore, the following way is easier to realise.

Test where the event originates

You can get a reference to the element where the event originates with event.target (or event.srcElement in IE). The event handler you bind to the li element should look like this then:

function handler(event) {
    event = event || window.event; // IE
    var target = event.target || event.srcElement; // IE

    if(target === this) {   // event originated where the handler was bound to
        console.info('out');
    }
}

and call it with

onmouseout="handler.call(this, event);"

Note that binding the event handlers inline, like you do, is bad design, as it mixes presentation with application logic. There are two other ways to bind event handlers

I recommend to read the articles about event handling on quirksmode.org.