JavaScript DHTML/Mochkit/Mouse

Материал из Web эксперт
Перейти к: навигация, поиск

Mouse Events with MochiKit

   <source lang="html4strict">


<!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>

Mouse Events with MochiKit

For a detailed description of what happens under the hood, check out <a href="mouse_events.js" class="view-source">mouse_events.js</a>.

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> ]

     Hover, Click, or Scroll In Me:

     Scroll Me and then the page scrolls! 
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
Scroll Me and then the page scrolls!
     Scroll Me and then the page does not scroll! 
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Scroll Me and then the page does not scroll!
Ignore me I just make the page big enough to require scrollbars.
Ignore me I just make the page big enough to require scrollbars.
Ignore me I just make the page big enough to require scrollbars.
Ignore me I just make the page big enough to require scrollbars.
Ignore me I just make the page big enough to require scrollbars.
Ignore me I just make the page big enough to require scrollbars.
Ignore me I just make the page big enough to require scrollbars.
Ignore me I just make the page big enough to require scrollbars.
Ignore me I just make the page big enough to require scrollbars.

</body> </html>

 </source>