test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mouseout test</title>
<script type="text/javascript">
window.addEventListener('load', function() {
document.getElementById("a").addEventListener('mouseout', function() {
console.log("mouseout");
});
document.body.addEventListener('mouseout', function() {
console.log("bodymouseout");
});
});
</script>
<style>
#a{ border:1px solid black; width:300px; height: 300px;}
</style>
</head>
<body>
<div id="a">
move mouse out of this div
</div>
</body>
</html>
testframe.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mouseout test frame</title>
<style>
iframe
{
width: 330px;
height: 330px;
}
#a{ border:1px solid green; width:350px; height: 350px;}
</style>
</head>
<body>
<iframe src="test.html"/>
</body>
</html>
- When
testframe.htmlis loaded in Chrome (on Windows), resize the browser to be narrow so that the right edge of the div is cut off.- Move the mouse out of the div off the right side. No mouseout event.
- When browser window is big enough to show the whole div, mouseout fires when moving the mouse out of all sides of the div.
- When
test.htmlis loaded directly in the browser, the mouseout event fires when moving the mouse out of all sides regardless of browser window size.
Works correctly in Firefox (unless someone can make the case that the Chrome behavior is correct).
Any suggestions for a workaround to detect when the mouse moves out of the div in this case?
I also tried adding the mouseout event handler to the document and window objects in the iframe, but no success.