Specific of rising onMouseOver and onMouseOut events of HTML elements
In this clause I would like to review some specific of handling onMouseOver and onMouseOut events for HTML elements by JavaScript scenarios.
To see what is happening lets take simple HTML document with a few elements nested inside each other.
<html>
<body>
<div>
First level div
<div class="d2">
Second level div <br />
<span>span inside second div</span>
</div>
<br />
<span>span inside first div</span>
</div>
</body>
Then let’s modify it in the following way:
- For the top-level DIV add handlers for onMouseOver and onMouseOut events.
- Add borders for the elements to see where limits of each element are.
- Add element where log of handling events will be written and some JavaScript to write this statistic.
The HTML document we got available here (example_1.html).
Its code looks like this:
<html>
<head>
<style>
.d1 { width:250px; height:150px; border:1px solid red; }
.d2 { border:1px solid blue; margin:10px; }
span { border:1px solid cyan; }
#log_container { border:1px solid green; }
</style>
<script>
var logContainer;
var index = 0;
function writelog(msg) { index++; logContainer.innerHTML += index + ". " + msg + "<br />"; }
function mouseover() { writelog("onMouseOver Event"); }
function mouseout() { writelog("onMouseOut Event"); }
</script>
</head>
<body>
<div class="d1" onmouseover="javascript:mouseover()" onmouseout="jabascript:mouseout()">
first div
<div class="d2">
another div <br />
<span>span inside second div</span>
</div><br />
<span>span inside first div</span>
</div><br /><br />
<div id='log_container'></div>
</body>
<script>logContainer = document.getElementById('log_container');</script>
</html>
Now, if we move mouse cursor over the elements and look at the output statistic we may notice two regularities:
- When cursor crosses the red border (border of the top-level DIV with event handlers), as it should be, two events – onMouseOver and onMouseOut occur.
- But interesting things happen when mouse cursor crosses limits of other elements (nested inside DIV with attached event handlers). Despite that cursor is not crossing borders of the top-level DIV, its events occur anyway. And they occur in the following order: each time the cursor crosses limits of a nested element (at that, it doesn’t matter if it moves inside or outside of the element) firstly onMouseOut event occurs, and then instantly onMouseOver event. And it is the same in any browser.
So now we can affirm the following:
events onMouseOver and onMouseOut of a parent element occur when mouse cursor crosses limits of a child element.
Now lets look what can be affected by such behavior.
The most widespread area where we can face usage of onMouseOver and onMouseOut events is drop-down menus on websites.
In the simplest case they behave like this:
When onMouseOver event for some element occur, some JavaScript code showing the menu is executed, and when onMouseOut event occur – some code hiding the menu.
This logic could be ideal, if these “undesirable” events don’t occur when cursor moves inside a displayed menu. Such behavior may become the reason of rising of unexpected effect, because JavaScript code of the onMouseOver and onMouseOut event handles is executed multiple times when cursor crosses limits of nested elements.
Here is a part of the page from real project (example_2.html) where I had to face such problems. If you open this page in IE, then you can notice how drop-down menus “blink” when cursor moves inside them. This happened exactly because of rising of the unexpected events.
So we can make the following conclusion: while developing JavaScript scenarios we can not manage rising of unexpected onMouseOver and onMouseOut events, so that we must just take into account the specific reviewed in this article and adjust scenarios logic accordingly.
