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

鼠标行为

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值