鼠标行为、坐标系、pageX/Y、拖拽

最新推荐文章于 2024-10-30 19:10:39 发布

小六*^____^*

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量298

点赞数 5

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_43641912/article/details/129412815

版权

鼠标行为

document.onclick = function(e){
  var e = e || window.event;
  console.log(e.clientX,e.clientY);

}

clientX clientY 鼠标位置相对于当前页面可视区域的坐标（不包括滚动条的距离）
在这里插入图片描述
X/Y 同clientX/Y 老版本firefox不支持

pageX/Y 鼠标位置相对于当前文档的坐标（包含滚动条的距离）IE9以下不支持
在这里插入图片描述

layerX/Y 同pageX/Y，IE11以下同 clientX/Y
offsetX/Y 鼠标位置相对于块元素的坐标（包含边框，但是safari不包括边框）
screenX/Y 鼠标位置相对于屏幕的坐标

因为pageX/Y有兼容性问题，但是又好用，所以需要对其进行封装，pageX/Y是鼠标相对于当前文档的坐标，而clicentX/Y是鼠标位置相对于当前页面可视区域的坐标（不包括滚动条的距离），那么把clicentX/Y加上滚动条的距离减去文档的偏移距离就是pageX/Y,因此pageX/Y封装

function pageOffset(e){
//    获取滚动条的距离
  var sLeft = getScrollOffset().x,
      sTop = getScrollOffset().y,
//      获取文档的偏移距离，有可能不存在为undefined
      dShiftTop = document.documentElement.clientTop || 0,
      dShiftLeft = document.documentElement.clientLeft || 0;
  return {
       x:e.clientX + sLeft - dShiftLeft,
       y: e.clientY +sTop -dShiftTop
  }
}
function getScrollOffset(){
  if(window.pageXOffset){
    //w3c标准
    return{
      x: window.pageXOffset,
      y: window.pageYOffset
    }
  } else{
    return{
      x: document.documentElement.scrollLeft + document.body.scrollLeft,
      y : document.documentElement.scrollTop + document.body.scrollTop
    }
  }
}

拖拽
document上写mouseup是因为如果操作过快，写在box上的话鼠标已经移出去了，再写事件就没用了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .box {
          position: relative;
          top: 0;
          left: 0;
          width: 100px;
          height: 100px;
          background-color: #baf;
      }
  </style>
</head>
<body>
  <div class="box">
  
  </div>
  <script type="text/javascript">
    var box = document.getElementsByClassName('box')[0];
    // box.onmousedown = function(){
    //   var  e = e || window.event,
    //       x = pageOffset(e).x - parseInt( getStyles(box, 'left')),
    //       y = pageOffset(e).y - parseInt( getStyles(box, 'top'))
    //   document.onmousemove = function(e){
    //     var e = e || window.event;
    //      box.style.top = pageOffset(e).y - y + 'px';
    //      box.style.left = pageOffset(e).x  - x + 'px';
    //   }
    //   document.onmouseup = function(){
    //     document.onmousemove = null;
    //     document.onmousedown = null
    //   }
    // }
    //  拖拽函数封装
    eleDrag(box)

    function eleDrag(ele) {
      var x,
          y;
      addEvent(ele, 'mousedown', eleMouseDown)
      function eleMouseDown(e) {
        var e = e || window.event;
        x = pageOffset(e).x - parseInt(getStyles(this, 'left'));
        y = pageOffset(e).y - parseInt(getStyles(this, 'top'));
        addEvent(document, 'mousemove', mouseMove);
        addEvent(document, 'mouseup', mouseUp);
      //  以防万一，把取消冒泡和阻止默认事件加上
        cancelBubble(e);
        preventDefaultEvent(e);

      }
      function mouseMove(e) {
        var e = e || window.event,
            page = pageOffset(e);
        ele.style.left = page.x - x + 'px';
        ele.style.top = page.y - y + 'px';
      }
      function mouseUp() {
        removeEvent(this, 'mousemove', mouseMove);
        removeEvent(this, 'mouseUp', mouseUp);
      }
    }

    //  封装绑定事件的函数
    function addEvent(ele, type, fn) {
      if (ele.addEventListener) {
        ele.addEventListener(type, fn, false);
      } else if (ele.attachEvent) {
        ele.attachEvent('on' + type, function () {
          fn.call(ele);
        })
      } else {
        ele['on' + type] = fn;
      }
    }

    //  取消事件绑定
    function removeEvent(ele, type, fn) {
      if (ele.removeEventListener) {
        ele.removeEventListener(type, fn, false)
      } else if (ele.detachEvent) {
        ele.detachEvent('on' + type, fn);
      } else {
        fn = null;
      }
    }

    //  获取滚动条距离
    function scrollOffset() {
      if (window.pageXOffset) {
        return {
          left: window.pageXOffset,
          top: window.pageYOffset
        }
      } else {
        return {
          left: document.documentElement.scrollLeft + document.body.scrollLeft,
          top: document.documentElement.scrollTop + document.body.scrollTop
        }
      }
    }

    //  封装pageX/Y
    function pageOffset(e) {
      var sL = scrollOffset().left,
          sT = scrollOffset().top,
          shifDisY = document.documentElement.clientTop || 0,
          shifDisX = document.documentElement.clientLeft || 0;
      return {
        x: e.clientX + sL - shifDisX,
        y: e.clientY + sT - shifDisY
      }

    }
    //取消冒泡
    function cancelBubble(e){
      var e = e || window.event;
        if(e.stopPropagation){
          e.stopPropagation();
        } else {
          e.cancelBubble = true;
        }
    }
    //阻止默认事件
    function preventDefaultEvent(e){
      if(e.preventDefault){
        e.preventDefault();
      } else {
        e.returnValue = false;
      }
    }
    //  获取样式的函数
    function getStyles(ele, attr) {
      if (window.getComputedStyle) {
        if (attr) {
          return window.getComputedStyle(ele, null)[attr];
        } else {
          return window.getComputedStyle(ele, null);
        }
      } else if (ele.currentStyle) {
        if (attr) {
          ele.currentStyle[attr];
        } else {
          ele.currentStyle
        }
      }
    }
  </script>

</body>
</html>