I'm trying to prevent the onmouseout event from firing when the mouse moves from an outer div in to one of the container's child elements. Here's the solution I came up with. It works in IE8 and Chrome, but not in Firefox (latest version). This is because in the Foo function, window.event is null. I've also verified no arguments get passed into the function. How do I make this code work in Firefox?
<html>
<body>
<div style="background-color: blue; width: 400px; height: 400px;" onmouseout="Foo()" id="Outer">
<div style="background-color: green; width: 100px; height: 100px;" id="Inner">
Child element
</div>
</div>
<script language="JavaScript">
var outer = document.getElementById('Outer');
function Foo()
{
var toElem = event.relatedTarget || event.toElement;
if(toElem != outer.parentNode)
return;
window.alert('Outer div fired onmouseout..');
}
</script>
</body>
</html>
I'm trying to prevent the onmouseout event from firing when the mouse moves from an outer div in to one of the container's child elements. Here's the solution I came up with. It works in IE8 and Chrome, but not in Firefox (latest version). This is because in the Foo function, window.event is null. I've also verified no arguments get passed into the function. How do I make this code work in Firefox?
<html>
<body>
<div style="background-color: blue; width: 400px; height: 400px;" onmouseout="Foo()" id="Outer">
<div style="background-color: green; width: 100px; height: 100px;" id="Inner">
Child element
</div>
</div>
<script language="JavaScript">
var outer = document.getElementById('Outer');
function Foo()
{
var toElem = event.relatedTarget || event.toElement;
if(toElem != outer.parentNode)
return;
window.alert('Outer div fired onmouseout..');
}
</script>
</body>
</html>
- 7 why dont you install the major browsers on your pc and test it? Thats how i do it, IE, Chrome, FF, Safari and Opera – Grumpy Commented Oct 22, 2011 at 21:04
- 6 Why don't you just test with each of the major browsers? You're only missing FF, Safari and Chrome. Anyways, using jQuery you basicly have a working script in any browser (IN MOST CASES) – OptimusCrime Commented Oct 22, 2011 at 21:06
- 3 Great site for checking browser patibility of DOM events (also, CSS properties): quirksmode/dom/events/index.html – James Allardice Commented Oct 22, 2011 at 21:07
- +1 for jQuery or other library, you probably can't get better cross-browser support.. – usoban Commented Oct 22, 2011 at 21:08
- 3 +1 for wanting to find solutions on your own (without hiding behind jQuery). -1 for asking StackOverflow to do the basic testing you should be doing. Try it out. If it doesn't work, try to find a solution. If you get stuck, ask a question. – user113716 Commented Oct 22, 2011 at 21:19
2 Answers
Reset to default 6It looks at first glance that your code should work fine in IE, but other browsers may have an issue with the use of the toElement property of the event object, which is a IE-specific property. The W3C defined property is called relatedTarget. So you should probably do a check to see which to use:
var toElem = event.relatedTarget || event.toElement;
if(toElem != outer.parentNode) {
//Do stuff
}
Note - I haven't actually tried your code in all browsers, so there may be other issues, but this is the one that leapt out at me.
I figured it out. This code works in IE, Firefox and Chrome.
<html>
<body>
<div style="background-color: blue; width: 400px; height: 400px;" id="Outer">
<div style="background-color: green; width: 100px; height: 100px;" id="Inner">
Child element
</div>
</div>
<script language="JavaScript">
var outer = document.getElementById('Outer');
outer.onmouseout = function Foo(args)
{
var toElem = (window.event) ? (event.relatedTarget || event.toElement) : args.relatedTarget;
if(toElem != outer.parentNode)
return;
window.alert('Outer div fired onmouseout..');
}
</script>
</body>
</html>