鼠标方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  9.     <style>
  10.         .box {
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: orange;
  14.         }
  15.     </style>
  16. </head>
  18. <body>
  19.     <div class="box"> </div>
  20.     <br><br><br><br><br><br><br><br><br>
  21.     <br><br><br><br><br><br><br><br><br><br>
  22.     <br><br><br><br><br><br><br><br><br><br>
  23.     <br><br><br><br><br><br><br><br><br><br><br><br>
  24.     <br><br><br><br><br><br><br><br><br>
  25.     <div style="height: 1000px;"></div>
  26.     <script>
  27.         //鼠标行为->坐标系
  28.         //clientX/Y 鼠标位置相对于当前可视区域的坐标
  29.         //  （不包含滚动条的距离）与滚动条状态无关
  30.         //layerX/Y 同pageXY相同 IE11以下同clientX/Y
  31.         //screenX/Y 鼠标位置相对于屏幕的坐标 整个屏幕 
  32.         //与浏览器的位置 大小 全屏 半屏等有关
  33.         //x/y 同clientX/Y相同 FF不支持（火狐不支持）因为火狐浏览器不兼容所以最好别用
  34.         //pageX/pageY ie9以下不支持
  35.         //鼠标位置相当于当前文档的坐标（包含滚动条的距离）滚动条偏移的距离+clientX/Y
  36.         document.onclick = function (e) {//e是事件对象
  37.             var e = e || window.event;
  38.             // console.log(e)
  39.             // console.log(e.clientY, e.pageY);
  40.             console.log(e.screenY,e.pageY);
  41.         }
  42.     </script>
  43. </body>
  44. </html>

offsetX/Y

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  9.     <style>
  10.         .box {
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: orange;
  14.         }
  15.         .box1{
  16.             position: absolute;
  17.             top: 200px;
  18.             left: 200px;
  19.             width: 100px;
  20.             height: 100px;
  21.             background-color: orange;
  22.         }
  23.     </style>
  24. </head>
  26. <body>
  27.     <div class="box"> </div>
  28.     <div class="box1"></div>
  29.     <br><br><br><br><br><br><br><br><br>
  30.     <br><br><br><br><br><br><br><br><br><br>
  31.     <br><br><br><br><br><br><br><br><br><br>
  32.     <br><br><br><br><br><br><br><br><br><br><br><br>
  33.     <br><br><br><br><br><br><br><br><br>
  34.     <div style="height: 1000px;"></div>
  35.     <script>
  36.         //鼠标行为->坐标系
  37.         //clientX/Y 鼠标位置相对于当前可视区域的坐标
  38.         //  （不包含滚动条的距离）与滚动条状态无关
  39.         //layerX/Y 同pageXY相同 IE11以下同clientX/Y
  40.         //screenX/Y 鼠标位置相对于屏幕的坐标 整个屏幕 
  41.         //与浏览器的位置 大小 全屏 半屏等有关
  42.         //x/y 同clientX/Y相同 FF不支持（火狐不支持）因为火狐浏览器不兼容所以最好别用
  43.         //pageX/pageY ie9以下不支持
  44.         //鼠标位置相当于当前文档的坐标（包含滚动条的距离）滚动条偏移的距离+clientX/Y
  46.         //offsetX/Y 鼠标位置相对于块元素的坐标 与相对的块元素有关 与其他的无关
  47.         //(包含边框，safari不包含边框)
  48.         var box=document.getElementsByClassName('box')[0];
  49.         var box1=document.getElementsByClassName('box1')[0];
  50.         box.onclick = function (e) {//e是事件对象
  51.             var e = e || window.event;
  52.             // console.log(e)
  53.             // console.log(e.clientY, e.pageY);
  54.             console.log(e.offsetX,e.offsetY);
  55.         }
  57.         box1.onclick = function(e) {
  58.             console.log(e.offsetX,e.offsetY);
  59.         }
  60.     </script>
  61. </body>
  63. </html>

兼容性

pagePos 整个页面，算上滚动条的获取鼠标方位

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  9.     <style>
  10.         .box {
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: orange;
  14.         }
  15.         .box1{
  16.             position: absolute;
  17.             top: 200px;
  18.             left: 200px;
  19.             width: 100px;
  20.             height: 100px;
  21.             background-color: orange;
  22.         }
  23.     </style>
  25. </head>
  27. <body>
  28.     <div class="box"> </div>
  29.     <div class="box1"></div>
  30.     <br><br><br><br><br><br><br><br><br>
  31.     <br><br><br><br><br><br><br><br><br><br>
  32.     <br><br><br><br><br><br><br><br><br><br>
  33.     <br><br><br><br><br><br><br><br><br><br><br><br>
  34.     <br><br><br><br><br><br><br><br><br>
  35.     <div style="height: 1000px;"></div>
  36.     <script type="text/javascript" src="./utils.js"></script>
  38.     <script>
  39.         var box=document.getElementsByClassName('box')[0];
  40.         document.onclick=function(e) {
  41.             var e=e||window.event;
  42.             console.log(e.pageY,pagePos(e).Y)
  43.         }
  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.     </script>
  57. </body>
  59. </html>

onmousemove

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  9. </head>
  10. <style>
  11.     .box {
  12.         position: absolute;
  13.         top: 200px;
  14.         left: 200px;
  15.         width: 100px;
  16.         height: 100px;
  17.         background-color: orange;
  18.     }
  19. </style>
  21. <body>
  22.     <div class="box"></div>
  23.     <script type="text/javascript" src="./utils.js"></script>
  24.     <script>
  25.         var box = document.getElementsByClassName('box')[0];
  26.       console.log(box)
  27.         //mousedown mouseup mousemove
  29.         // box.onmousedown=function(e) {
  30.         //     box.onmousemove=function(e) {
  32.         //     }
  33.         //     box.onmouseup=function(e) {
  35.         //     }
  36.         // }
  39.         document.onmousemove = function(e) {
  40.             var e=e || window.event,
  41.             page=pagePos(e);
  42.             box.style.left=page.X+'px';
  43.             box.style.top = page.Y + "px";
  44.         }
  45.     </script>
  46. </body>
  48. </html>

偏移问题

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  9. </head>
  10. <style>
  11.     .box {
  12.         position: absolute;
  13.         top: 200px;
  14.         left: 200px;
  15.         width: 100px;
  16.         height: 100px;
  17.         background-color: orange;
  18.     }
  19. </style>
  21. <body>
  22.     <div style="height: 1000px;"></div>
  23.     <div class="box"></div>
  24.     <script type="text/javascript" src="./utils.js"></script>
  25.     <script>
  26.         var box = document.getElementsByClassName('box')[0];
  27.       console.log(box)
  28.         //mousedown mouseup mousemove
  30.         /*缺陷：点击中间等box区域，box也会直接移动，因为把box左上角赋予鼠标点击的方位，
  31.         有时只是想点击方块，可以移动box，之后再移动，而不是直接移动
  32.         */
  33.         // box.onmousedown=function(e) {
  34.         //     document.onmousemove=function(e) {
  35.         //         var e=e||window.event,
  36.         //         page=pagePos(e);
  37.         //         box.style.left=page.X + "px";
  38.         //         box.style.top = page.Y + "px";
  39.         //     }
  40.         //     box.onmouseup=function(e) {
  41.         //         document.onmousemove=null;
  42.         //     }
  43.         // }
  46.         box.onmousedown=function(e) {
  47.             var e=e||window.event;
  48.             x=pagePos(e).X-getStyles(box,'left');
  49.             /*算上滚动条偏移的鼠标点击的坐标-算上滚动条box左上角的距离
  50.             =鼠标点击的坐标至box左上角的距离*/
  51.             y=pagePos(e).Y - getStyles(box, "top");
  52.             console.log(x,y)
  53.             document.onmousemove=function(e) {//冒泡事件
  54.                 var e=e||window.event,
  55.                 page=pagePos(e);
  56.                 box.style.left=page.X -x+ "px";
  57.                 box.style.top = page.Y-y + "px";
  59.             }
  60.             document.onmouseup=function(e) {
  61.                 // document.onmousemove=null;
  62.                 // document.onmouseup = null;
  63.                 this.onmousemove=null;
  64.                 this.onmouseup = null;
  65.             }
  66.         }
  69.         // document.onmousemove = function(e) {
  70.         //     var e=e || window.event,
  71.         //     page=pagePos(e);
  72.         //     box.style.left=page.X+'px';
  73.         //     box.style.top = page.Y + "px";
  74.         // }
  75.     </script>
  76. </body>
  78. </html>

封装拖拽函数

但拖拽边界有问题，下一课程会有解决之道 得重写 满足不了需求 重新封装

  1.         //拖拽 封装好 以后直接调用就行了 
  2.                 //有边界
  3.         function elemDrag(elem) {
  4.             var x,
  5.                 y;
  6.             addEvent(elem, 'mousedown', function (e) {
  7.                 // console.log('1');
  8.                 var e = e || window.event;
  9.                 // console.log(elem);
  10.                 x = pagePos(e).X - getStyles(elem, 'left');
  11.                 y = pagePos(e).Y - getStyles(elem, 'top');
  13.                 addEvent(document, 'mousemove', mouseMove);
  14.                 addEvent(document, 'mouseup', mouseUp);
  15.                 cancelBubble(e);//保险起见 把阻止事件放进去
  16.                 preventDefaultEvent(e);
  17.             });
  18.             function mouseMove(e) {
  19.                 console.log(elem);
  20.                 var e = e || window.event;
  21.                 elem.style.top = pagePos(e).Y - y + 'px';
  22.                 elem.style.left = pagePos(e).X - x + 'px';
  23.             }
  24.             function mouseUp(e) {
  25.                 var e = e || window.event;
  26.                 removeEvent(document, 'mousemove', mouseMove);
  27.                 removeEvent(document, 'mouseup', mouseUp);
  28.             }
  29.         }