Make sure that mouseenter/mouseleave fire on the correct element when doing delegation. Fixes #9069.

This commit is contained in:
John Resig 2011-05-10 11:49:32 -04:00
parent 521ae562da
commit 419b5e5e2a
2 changed files with 18 additions and 3 deletions

View file

@ -654,6 +654,9 @@ var withinElement = function( event ) {
// Check if mouse(over|out) are still within the same parent element // Check if mouse(over|out) are still within the same parent element
var parent = event.relatedTarget; var parent = event.relatedTarget;
// set the correct event type
event.type = event.data;
// Firefox sometimes assigns relatedTarget a XUL element // Firefox sometimes assigns relatedTarget a XUL element
// which we cannot access the parentNode property of // which we cannot access the parentNode property of
try { try {
@ -663,15 +666,13 @@ var withinElement = function( event ) {
if ( parent && parent !== document && !parent.parentNode ) { if ( parent && parent !== document && !parent.parentNode ) {
return; return;
} }
// Traverse up the tree // Traverse up the tree
while ( parent && parent !== this ) { while ( parent && parent !== this ) {
parent = parent.parentNode; parent = parent.parentNode;
} }
if ( parent !== this ) { if ( parent !== this ) {
// set the correct event type
event.type = event.data;
// handle event if we actually just moused on to a non sub-element // handle event if we actually just moused on to a non sub-element
jQuery.event.handle.apply( this, arguments ); jQuery.event.handle.apply( this, arguments );
} }

View file

@ -184,6 +184,16 @@
</tr> </tr>
</table> </table>
<h1>Mouseleave Tests</h1>
<div class="out" style="margin:20px; border:1px solid #000; background: red;">
<p>Count mouse leave event</p>
<div class="in" style="background: green; margin: 10px auto; width: 50%;">
<p>mouse over here should not trigger the counter.</p>
</div>
<p>0</p>
</div>
<ul id="log"></ul> <ul id="log"></ul>
<script type='text/javascript'> <script type='text/javascript'>
@ -270,6 +280,10 @@
jQuery("#boundSubmit").blink(); jQuery("#boundSubmit").blink();
}); });
var n = 0;
$("div.out").live("mouseleave", function() {
$("p:last", this).text(++n);
});
</script> </script>
</body> </body>
</html> </html>