Skip to content

Instantly share code, notes, and snippets.

@louisremi

louisremi/mouseenter_leave.delegation.html

Created September 13, 2009 11:42
Show Gist options
  • Save louisremi/186163 to your computer and use it in GitHub Desktop.
Save louisremi/186163 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mouseenter_leave.delegation.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Over and Out test page</title>
<link rel="stylesheet" type="text/css" media="all" href="shCore.css" />
<link rel="stylesheet" type="text/css" media="all" href="shThemeFadeToGrey.css" />
<style>
.deco {
padding: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #1a1a1a;
color: #f2f2f2;
}
ul {
padding: 20px;
display: inline-block;
}
li {
font-size: 1.3em;
}
li.blue {
background-color: #000e32;
}
li span {
background-color: #143200;
font-size: 0.8em;
}
li span span {
background-color: #320008;
font-size: 0.8em;
}
</style>
</head>
<body>
<h1>Event delegation with mouseover/mouseout</h1>
<!--<p>Test page for the new <a href="http://github.com/lrbabe/jquery.closest/tree/master">.closest()</a> implementation for jQuery and the plugin <a href="http://github.com/lrbabe/jquery.closest/tree/master">jquery.overandout.js</a></p>-->
<ul class="deco">
<li class="">
Text in the li, <span>text in a span, <span>text in a sub-span</span></span>, <span>text in another span, <span>text in another sub-span</span></span>
</li>
<li class="blue">
Text in the li, <span>text in a span, <span>text in a sub-span</span></span>, <span>text in another span, <span>text in another sub-span</span></span>
</li>
<li class="blue">
Text in the li, <span>text in a span, <span>text in a sub-span</span></span>, <span>text in another span, <span>text in another sub-span</span></span>
</li>
<li class="">
Text in the li, <span>text in a span, <span>text in a sub-span</span></span>, <span>text in another span, <span>text in another sub-span</span></span>
</li>
<li class="blue">
Text in the li, <span>text in a span, <span>text in a sub-span</span></span>, <span>text in another span, <span>text in another sub-span</span></span>
</li>
<li class="">
Text in the li, <span>text in a span, <span>text in a sub-span</span></span>, <span>text in another span, <span>text in another sub-span</span></span>
</li>
</ul>
<p>
Total <em>mouseover</em> events on elements matching <code>"li.blue"</code>: <span id="mouseover">0</span><br />
Total <em>mouseout</em> events on elements matching <code>"li.blue"</code>: <span id="mouseout">0</span>
</p>
<script src="jquery.js"></script>
<script>
$(function() {
var $mouseover = $("#mouseover"),
$mouseout = $("#mouseout"),
context = $("ul")[0];
$("li.blue", context).live("mouseover", function( event ) {
var $relatedClosest = $(event.relatedTarget).closest("li.blue", context);
if(!$relatedClosest.length || event.currentTarget != $relatedClosest[0])
$mouseover.html(parseInt($mouseover.html(), 10) +1);
}).live("mouseout", function( event ) {
var $relatedClosest = $(event.relatedTarget).closest("li.blue", context);
if(!$relatedClosest.length || event.currentTarget != $relatedClosest[0])
$mouseout.html(parseInt($mouseout.html(), 10) +1);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment