Mouse Events with MochiKit
<!--
MochiKit is dual-licensed software. It is available under the terms of the
MIT License, or the Academic Free License version 2.1. The full text of
each license is included below.
-->
<!-- Code revised from MochiKit demo code -->
<!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>
<style type="text/css">
h1 {
font-size: 2em;
color: #4B4545;
text-align: center;
}
div.scroll-box {
border : 2px solid blue;
padding : 4ex 4em;
margin : 4ex 4em;
}
div.padding {
padding : 4ex 4em;
margin : 4ex 4em;
border : 1px solid silver;
}
</style>
<script type="text/javascript" src="MochiKit-1.4.2//lib/MochiKit/MochiKit.js"></script>
<script type="text/javascript">
/*
Mouse Events: Simple Mouse Scrolling Handlers
*/
function showMouseEvent(evt) {
getElement("show-mouse-event-repr").innerHTML = repr(evt);
evt.stop();
};
function stopPageFromScrolling( event ) {
var src = event.src();
var scrollTop = src.scrollTop;
// While trying to stop scrolling events for IE, found that it
// jumped around a bit. The following fudgetFactor is NOT the way
// to handle this but was the best I could do with the limited time
// I had.
var fudgeFactor = /MSIE/.test(navigator.userAgent) ? 25 : 0;
// scrolling up
if (event.mouse().wheel.y < 0) {
// Following test should probably be "if (scrollTop == 0)" which
// works in FF but not IE.
if (scrollTop <= fudgeFactor) {
event.stop();
}
}
//..scrolling down
else {
// Following test should be "if (scrollTop == src.scrollHeight - src.clientHeight)",
// see comment above.
if (src.scrollHeight <= (scrollTop + src.clientHeight + fudgeFactor)) {
event.stop();
}
}
};
function connectEvents(){
connect("show-mouse-event", "onmousemove", showMouseEvent);
connect("show-mouse-event", "onmousedown", showMouseEvent);
connect("show-mouse-event", "onmouseup", showMouseEvent);
connect("show-mouse-event", "onmousewheel", showMouseEvent);
connect("no-scroll-page", "onmousewheel", stopPageFromScrolling);
};
connect(window, 'onload',
function() {
connectEvents();
var elems = getElementsByTagAndClassName("A", "view-source");
var page = "mouse_events/";
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
var href = elem.href.split(/\//).pop();
elem.target = "_blank";
elem.href = "../view-source/view-source.html#" + page + href;
}
});
</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>
Related examples in the same category