<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mouse Events with MochiKit</title> <link href="mouse_events.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/MochiKit/MochiKit.js"></script> <script type="text/javascript" src="mouse_events.js"></script> </head> <body> <h1> Mouse Events with MochiKit </h1> <p> For a detailed description of what happens under the hood, check out <a href="mouse_events.js" class="view-source">mouse_events.js</a>. </p> <p> View Source: [ <a href="index.html" class="view-source">index.html</a> | <a href="mouse_events.js" class="view-source">mouse_events.js</a> | <a href="mouse_events.css" class="view-source">mouse_events.css</a> ] </p> <div id="show-mouse-event" class="scroll-box"> Hover, Click, or Scroll In Me:<br/><br/> <span id="show-mouse-event-repr"></span> </div> <div id="scroll-page" class="scroll-box" style="height: 100px; overflow: scroll;"> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> Scroll Me and then the page scrolls! <br /> </div> <div id="no-scroll-page" class="scroll-box" style="height: 100px; overflow: scroll;"> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> Scroll Me and then the page does not scroll! <br /> </div> <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div> <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div> <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div> <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div> <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div> <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div> <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div> <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div> <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div> </body> </html>