mouse leave event [Archive]

bravesirrobin

4 Oct 2007, 7:40 PM

I am getting frustrated with the "mouseout" event. It fires whenever the element you move the mouse over changes, even if you're still inside the original element.

E.g.:
<ul onmouseout="alert('dude')">
<li>item</li>
<li>item2</li>
</ul>

In this scenario, if you hover over "item", then move your mouse to hover over "item2" you will see the alert, even though you haven't left the "ul" element that the event is attached to.

Now, I started writing myself a function that would check the position of the element in question and the actual location of the mouse to check if it had really left the element, but then I remembered seeing a function / custom event in a library somewhere that did this for you.

Now I can't for the life of me find it again. Does anyone know of such a function? Is there anything in ext? Or mochikit? or mootools? or dojo? However, if it's in prototype I'm not interested, I'll just write it myself :p.

Any help much appreciated! :)

Ta,
Robin.

evant

4 Oct 2007, 7:46 PM

You could possibly do something clever using http://extjs.com/deploy/ext/docs/output/Ext.Element.html#contains

brian.moeskau

4 Oct 2007, 11:41 PM

The problem is that when you enter an LI, you have technically exited the UL in DOM terms, so the behavior you are seeing is correct. To make this a little more clear, try testing with this CSS:

ul {border:1px solid red;padding:10px;}
li {border:1px solid blue;margin:5px;}

I can't think of a super easy way to achieve what you need off the top of my head, but there probably is some way to work around it. Can you explain what you are trying to achieve with the mouseout being on the UL element?

BTW, rather than alerts, use console.log (or Ext.log if you want to get fancy ;)). alert is about the worst possible way to test anything involving mouse movement.

brian.moeskau

4 Oct 2007, 11:45 PM

BTW, since you are new to Ext, I'll add that you should not be sticking event handlers directly in your HTML if you can avoid it. Here's my test version of what you're doing for reference in more traditional Ext style:

<html>
<head>
<title>Ext Test Page</title>
<link rel="stylesheet" type="text/css" href="../../ext-2.0/resources/css/ext-all.css">
<script type="text/javascript" src="../../ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-2.0/ext-all-debug.js"></script>
<style>
body {margin:30px;}
ul {border:1px solid red;padding:10px;}
li {border:1px solid blue;margin:5px;}
</style>
<script>
Ext.onReady(function(){
Ext.fly('my-list').on('mouseout', function(){
Ext.log('Exiting the UL');
});
});
</script>
</head>
<body>
<ul id="my-list">
<li>item</li>
<li>item2</li>
</ul>
</body>
</html>