鼠标行为

  1. //  鼠标行为->坐标系 
  2. //  clientX/Y  鼠标位置相当于当前可视区域的坐标（不包括滚动条的滚动距离）
  3. //  layerX/Y   同pageX/pageY一样 ie浏览器支持性不好
  4. //  x/y   同clientX/Y一样，火狐浏览器老版不支持
  5. //  pageX/pageY 鼠标位置相对于当前文档的坐标（包含滚动条滚动的距离）ie9一下不支持
  6. //  screenX/Y   鼠标位置相对于屏幕的坐标
  8. // offsetX/offsetY 鼠标位置相对于块元素的位置 包含边框  safari不包括边框
  9. document.onclick=function(){
  10.   var e=e||window.event;
  11. }

封装pageX/pageY

  1. function getScrollOffset() {
  2.   if(window.pageXOffset){
  3.     return {
  4.       left: window.pageXOffset,
  5.       top: window.pageYOffset
  6.     }
  7.   }else{
  8.     return {
  9.       left: document.body.scrollLeft+document.documentElement.scrollLeft,
  10.       top: document.body.scrollTop+document.documentElement.scrollTop,
  11.     }
  12.   }
  13. }
  14. function pagePos(e){
  15.   var sLeft=getScrollOffset().left,
  16.       sTop=getScrollOffset().top,
  17.       cLeft=docuemnt.documentElement.clientLeft||0;
  18.           cTop=docuemnt.docuemntElement.clientTop||0;
  19.   return {
  20.     X: e.clientX+sLeft-cLeft,
  21.     Y: e.clientY+sTop-cTop;
  22.   }
  23. }

拖拽

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style type='text/css'>
  9.         .box {
  10.             position: absolute;
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: pink;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <br/>
  19.     <div class='box'></div>
  20. </body>
  21. <script>
  22.     //  鼠标行为->坐标系 
  23.     //  clientX/Y  鼠标位置相当于当前可视区域的坐标（不包括滚动条的滚动距离）
  24.     //  layerX/Y   同pageX/pageY一样 ie浏览器支持性不好
  25.     //  x/y   同clientX/Y一样，火狐浏览器老版不支持
  26.     //  pageX/pageY 鼠标位置相对于当前文档的坐标（包含滚动条滚动的距离）ie9一下不支持
  27.     //  screenX/Y   鼠标位置相对于屏幕的坐标
  29.     // offsetX/offsetY 鼠标位置相对于块元素的位置 包含边框  safari不包括边框
  30.     // document.onclick=function(){
  31.     //     var e=e||window.event;
  32.     // }
  33.     function getScrollOffset() {
  34.         if(window.pageXOffset){
  35.             return {
  36.                 left: window.pageXOffset,
  37.                 top: window.pageYOffset
  38.             }
  39.         }else{
  40.             return {
  41.                 left: document.body.scrollLeft+document.documentElement.scrollLeft,
  42.                 top: document.body.scrollTop+document.documentElement.scrollTop,
  43.             }
  44.         }
  45.     }
  46.     function pagePos(e){
  47.         var sLeft=getScrollOffset().left,
  48.             sTop=getScrollOffset().top,
  49.             cLeft=document.documentElement.clientLeft||0;
  50.             cTop=document.documentElement.clientTop||0;
  51.         return {
  52.             X: e.clientX+sLeft-cLeft,
  53.             Y: e.clientY+sTop-cTop
  54.         }
  55.     }
  56.     function getStyles(elem,prop){
  57.         if(window.getComputedStyle){
  58.             if(prop){
  59.                 return parseInt(window.getComputedStyle(elem,null)[prop]);
  60.             }else{
  61.                 return window.getComputedStyle(elem,null);
  62.             }
  63.         }else{
  64.             if(prop){
  65.                 return parseInt(elem.currentStyle[prop]);
  66.             }else{
  67.                 return elem.currentStyle;
  68.             }
  69.         }
  70.     }
  72.     var oBox=document.getElementsByClassName('box')[0];
  74.     oBox.onmousedown=function(e){
  75.         var x=pagePos(e).X-getStyles(oBox,'left');
  76.         var y=pagePos(e).Y-getStyles(oBox,'top');
  77.         console.log('pageX,pageY',x,y)
  78.         console.log('offsetX,offsetY',e.offsetX,e.offsetY)
  79.         document.onmousemove=function() {
  80.             var e=e||window.event,
  81.                 page=pagePos(e);
  82.                 oBox.style.left=page.X-x+'px';
  83.                 oBox.style.top=page.Y-y+'px';
  84.         }
  85.         document.onmouseup=function(e){
  86.             document.onmousemove=null;
  87.             document.onmouseup=null;
  88.         }
  89.     }
  91. </script>
  92. </html>

封装拖拽方法

  1.  elemDrag(oBox)
  2.     function addEvent(el,type,fn){
  3.         if(el.addEventListener){
  4.             el.addEventListener(type,fn,false);
  5.         }else if(el.attachEvent){
  6.             el.attachEvent('on'+type,function(){
  7.             fn.call(el);
  8.             })
  9.         }else{
  10.             el['on'+type]=fn;
  11.         }
  12.     }
  15.        function elemDrag(elem) {
  16.            var x,y;
  18.            addEvent(elem,'mousedown',function(e){
  19.                var e=e||window.event;
  20.                x=pagePos(e).X-getStyles(elem,'left');
  21.                y=pagePos(e).Y-getStyles(elem,'top');
  23.                addEvent(document,'mousemove',mouseMove);
  24.                addEvent(document,'mouseup',mouseUp);
  25.             //    cancelBubble(e);   未完成
  26.             //    preventDefaultEvent(e);
  27.            })
  29.            function mouseMove(e) {
  30.                var e=e||window.event;
  31.                elem.style.top=pagePos(e).Y-y+'px';
  32.                elem.style.left=pagePos(e).X-x+'px';
  33.            }
  35.            function mouseUp(e) {
  36.                 var e=e||window.event;
  37.                 // removeEvent(document,'mousemove',mouseMove);
  38.                 // removeEvent(document,'mouseUp',mouseUp);
  39.                 document.removeEventListener('mousemove',mouseMove,false);
  40.                 document.removeEventListener('mouseup',mouseUp,false);
  41.            }
  42.        }