自学js第十五天:event坐标偏移量位置和window对象

最新推荐文章于 2021-06-17 21:45:01 发布

AKA俄语人Лев

最新推荐文章于 2021-06-17 21:45:01 发布

阅读量1.5k

点赞数 2

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/weixin_47592060/article/details/116464084

版权

一.Event对象集合中的鼠标按下或者点击时的相对位置:!=元素的自身位置

1.鼠标event对象给我们展示了 client / offset / page / screen系列的X Y坐标可以用于在不同需求下获取用户鼠标的相对位置.(相对于各种参考物体的位置)

2.首先先了解鼠标event其实是一个事件对象集合来的,里面包含各种各样的鼠标事件的信息.其中就有当前用户点击鼠标触发事件的相对位置坐标. 比如如下的pageX,和 pageY

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5G314E4j-1620308920784)(C:\Users\tuyue\AppData\Local\Temp\1617691163402.png)]

属性	说明
clientX	以window浏览器左上顶角为原点，定位 x 轴坐标
clientY	以window浏览器左上顶角为原点，定位ｙ轴坐标
offsetX	以当前事件的目标对象左上角为原点，定位x轴坐标
offsetY	以当前事件的目标对象左上角为原点，定位y轴坐标
pageX	以Document 对象（即文本窗口）左上角为原点，定位x轴坐标
pageY	以Document 对象（即文本窗口）左上角为原点，定位ｙ轴坐标
screenX	计算机屏幕左上角为原点，定位x轴坐标
screenY	计算机屏幕左上角为原点，定位ｙ轴坐标
layerX	最近的绝对定位的父元素（如果没有，则为Document对象）左上角为原点，定位x轴坐标
layerY	最近的绝对定位的父元素（如果没有，则为Document对象）左上角为原点，定位ｙ轴坐标

2,event对象的鼠标相对位置的图例:

在这里插入图片描述

兼容

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>event对象 偏移量 坐标</title>
  <style>
    * {
    
      margin: 0;
      padding: 0;
    }

    body {
    
      position: relative;
      height: 1500px;
      background: #ccc url('images/bird.png');
    }

    .box {
    
      position: fixed;
      width: 200px;
      height: 200px;
      padding: 20px;
      margin: 20px;
      border: 2px solid green;
      background-color: #fff;
    }

    .child {
    
      width: 50px;
      height: 50px;
      padding: 20px;
      margin: 20px;
      border: 2px solid red;
      background-color: #222;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="child"></div>
  </div>
  <script src='js/common.js'></script>
  <script>


    /*

	//这些属性都是只你鼠标点击下去的鼠标坐标而已,只是相对于什么来定位的坐标,切记是鼠标事件evevt的位置
      event对象中包含很多的坐标属性
      他们都是鼠标指针尖端在触发事件的时候 的坐标位置

      *clientX clientY 
      触发事件时鼠标指针距离window窗口左上角的位置
      
      坐标原点为 window窗口的左上角 

      *pageX pageY
      触发事件时鼠标指针距离docuemnt文档左上角的位置
      坐标原点为 document文档的左上角 
      
      *offsetX offsetY
      元素content内容区域的左上角为原点
      以当前事件的目标对象边框内沿(content)左上角为原点，定位x轴坐标

      ~ screenX screenY
      触发事件时鼠标指针距离 你的电脑显示器屏幕视窗(显示器)左上角的位置
      
      ~ layerX layerY
      触发事件的DOM对象的DOM树上的父级(祖级)中最近的拥有定位属性的元素的左上角为原点 (鸡肋)
     
    
    */
    var oBox = $('.box');
    var oChild = $('.child')

    // oBox.addEventListener('click', function (e) {
    
    //   console.log(e.layerX, e.layerY);
    // }, false);


    oChild.addEventListener('click', function (e) {
    
      console.log(e.layerX, e.layerY);
    }, false)

  </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sjrPFyfo-1620308920804)(C:\Users\tuyue\AppData\Local\Temp\1617946981275.png)]

鼠标相对于window和相对于document区别: (即client和page的区别)

①如果文档页面page长度和window长度一致,则则蓝盒子的相对于document和window的坐标是一致的坐标

②如果你的文档页面长度,即类word有很多页,一个window装不下会有滚动条时,则蓝盒子的相对于document和window的坐标是不一致的坐标,如下例子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7viBaVT8-1620308920808)(C:\Users\tuyue\AppData\Local\Temp\1617947319506.png)]

二.window.属性–浏览器窗口各种属性位置与尺寸

1.获取window窗口的inner和outer宽高

下面方法是包括滚动条的宽高，不支持 IE8

window.innerWidth
window.innerHeight

①innerWidth=width + padding + border + 滚动条

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dyFyZqW2-1620308920810)(C:\Users\tuyue\AppData\Local\Temp\1617982569678.png)]

② outerWidth+height= 浏览器全部整体宽高(浏览器整体宽度和高度 (包括工具栏控制台地址栏) )

PS: outerWidth+height: outerWidth浏览器兼容差，可获取包括工具栏的宽高

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gB6eHpUd-1620308920813)(C:\Users\tuyue\AppData\Local\Temp\1617982722059.png)]

2.获取页面滚动条在window的位置即滚动条往下滚了多少,往右滚了多少

返回整个页面的滚动的位置，pageYOffset/pageXOffset 与 scrollY/scrollX 返回的值一致，前者是后者的别名，建议使用前者，不支持 IE8

 document.documentElement.scrollTop || document.body.scrollTop  || window.pageYOffset 
//document.documentElement.scrollTop  html标签范围内的滚动高度
//document.body.scrollTop   body标签范围内的滚动高度
//window.pageYOffset 基本不用
// document.documentElement.scrollTop || document.body.scrollTop 最常用兼容写法:获取滚动高度


 document.documentElement.scrollLeft || document.body.scrollLeft  || window.pageXOffset

//window.pageXOffset 也基本不用
// document.documentElement.scrollLeft|| document.body.scrollLeft   最常用兼容写法::获取滚动宽度

3.获取window窗口在用户显示器的位置(很少用)

标准浏览器使用的是 screenX/screenY，IE 中使用的是 screenLeft/screenTop

window.screenLeft || window.screenX
window.screenTop || window.screenY

三.获取元素属性element.方法:元素所占用的空间尺寸和位置

①新出的移动端的getBoundingClientRect()方法:

PS: getBoundingClientRect不管元素的当前结构层级或者定位层级

top left bottom right x y 都是距离window浏览器的左上角

使用方法 getBoundingClientRect() 返回的值见下图：

IE 只返回 top right bottom left 四个值，如果需要 width height 则需要计算：

function getBoundingClientRect(elem) {
   
    let rect = elem.getBoundingClientRect()
    return {
   
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        left: rect.left,
        width: rect.width || rect.right - rect.left,
        height: rect.height || rect.bottom - rect.top
    }
}
复制代码

案例;

<!--
 * @Author: your name
 * @Date: 2020-08-15 16:06:47
 * @LastEditTime: 2021-04-19 03:48:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \案例\case00.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>getBoundingClientRect</title>
  <style>
    * {
    
      margin: 0;
      padding: 0;
    }

    body {
    
      height: 10000px;
    }

    .page {
    
      position: relative;
      margin: 200px;
      width: 400px;
      height: 400px;
      box-shadow: 0 0 4px #222;
    }

    .wrap {
    
      position: absolute;
      overflow: auto;
      width: 200px;
      height: 300px;
      padding: 10px;
      margin: 100px auto;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div class="page">
    <div class="wrap">
      你好 我是海牙老师 巴拉啦小魔仙 变身
      你好 我是海牙老师 巴拉啦小魔仙 变身
      你好 我是海牙老师 巴拉啦小魔仙 变身
      你好 我是海牙老师 巴拉啦小魔仙 变身
      你好 我是海牙老师 巴拉啦小魔仙 变身
      你好 我是海牙老师 巴拉啦小魔仙 变身
      你好 我是海牙老师 巴拉啦小魔仙 变身
      你好 我是海牙老师 巴拉啦小魔仙 变身
      你好 我是海牙老师 巴拉啦小魔仙 变身
      你好 我是海牙老师 巴拉啦小魔仙 变身
      你好 我是海牙老师 巴拉啦小魔仙 变身
      你好 我是海牙老师 巴拉啦小魔仙 变身
      你好 我是海牙老师 巴拉啦小魔仙 变身
    </div>
  </div>

  <script src="js/common.js"></script>
  <script>

    /*
      getBoundingClientRect
      不管元素的当前结构层级  或者 定位层级 
      top left bottom right x y 都是距离window浏览器的左上角

    {
      bottom: 底边距离浏览器顶部
      height: 元素总高度(height+padding+border)
      left: 左边距离浏览器左边
      right: 右边距离浏览器左边 
      right -left      = 元素的width

      top: 顶部距离浏览器顶部
      width:  元素总宽度(width+padding+border)
      x: 元素左上角顶点距离浏览器左上角顶点的坐标X
      y: 元素左上角顶点距离浏览器左上角顶点的坐标Y
    }
     */

    var oWrap = $('.wrap');

    console.log(oWrap.getBoundingClientRect());

    /*
    DOMRect
    bottom: 622
    height: 322
    left: 200
    right: 422
    top: 300
    width: 222
    x: 200
    y: 300
    __proto__: DOMRect 
    
    */

  </script>
</body>

</html>

①e.offsetParent; 获取当前子元素最近的定位父级元素(如果没有则返回null,隐转为false)

parentNode/parentElement与offsetParent区别?
//一个是固定的结构父级 和 一个是不固定的定位父级    

offsetParent  指与位置有关的上级元素  只读
parentNode  指与位置无关的上级元素   只读

offsetParent直接的将是影响元素位置的上级element，而parentElement与位置显示无关时dom中的上级element。
例如：
  <BODY>
  <div   style="border:   1px   solid   black;position:absolute;">  
  <form>  
  <input   type="checkbox"   id="cc">  
  </form>  
  </div>  

//这个例子中，“cc”元素的offsetParent是div，如果去掉div的position属性，那么cc的offsetParent就会变为windowview。而parentElement一直都为form。

//与此相关的还有offsetLeft和offsetTop两种属性，他们分别表示的是元素与offsetElement相对应的左侧和顶部距离。

//PS:parentNode和parentElement代表的意义和功能一样(结构父节点都是一样的)，

//console.log(oHeader.children); //获取其全部子元素 只有标签 ,返回htmlcollection标签集合
//console.log(oHeader.childNodes); //获取全部子节点 包含文本节点与标签节点 ,返回nodelist节点集合
//childNodes和children功能不是很一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持

②e.clientWidth/e.clientHeight(两不包物体宽高)

1.元素的宽度高度 : width/height + padding 不包括边框也不包括滚动条

2. 返回盒子元素不含滚动条的尺寸，不包括边框boder

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight
复制代码

如果是 document.documentElement，那么返回的是不包含滚动条的视口尺寸
如果是 document.body，并且是在混杂模式下，那么返回的是不包含滚动条的视口尺寸

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Am6vOpv-1620308920820)(C:\Users\tuyue\AppData\Local\Temp\1617987127628.png)]

③e.offsetWidth/offsetHeight: (物体全部宽高)

1.元素的实际宽度高度 width/height + padding + border 包括滚动条

2.同样可以使用 offsetWidth/offsetHeight 来获取元素包括滚动条和边框的尺寸，这个方法返回元素本身的宽高 + padding + border + 滚动条

           offsetWidth元素自身宽度/offsetHeight 高度如何获取

            1.元素自身实际宽度 
            dom.offsetWidth 
            width + padding + border + 滚动条

            2.元素自身实际高度
            dom.offsetHeight
            height + padding + border + 滚动条


            //为什么不直接通过封装方法getStyle获取元素currentStyle的width样式值
		   //因为元素的实际宽度 = width + padding + borde.(但是这里没有包括滚动条的)
			function getStyle (obj, attr) {
     //返回样式集合list表内部找具体样式,三目写法
  return obj.currentStyle ?   obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
            r

④e.clientLeft/clientTop：获取单纯边框的宽度(少用)

返回的是’计算后’的 CSS 样式的 border-left-width/border-top-width 的值，就是边框的宽度

⑤e.offsetLeft/offsetTop：获取子元素边框距离最近的定位父级实际内容距离(即一个蓝盒子dom.left左边和dom.top上边的坐标值)

即也就是子元素到定位父级的距离,如果没有定位父级则是到windoview的距离

1.相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 或window的元素）的左右偏移值，offsetLeft/offsetTop 返回元素 X Y 坐标值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WHUItUI5-1620308920823)(C:\Users\tuyue\AppData\Local\Temp\1617987713422.png)]

2.由于只能获取子元素到定位父级的距离,因此假如此时有定位父级但又想获取子元素到windowview的xy坐标距离该怎么办呢?
//需求 取一个定位元素的左上角距离浏览器左上角的位置

pos子元素 距离 window view的左上角距离是= 
//用子元素到定位父级元素的距离+ 定位父级到定位父级距离(此时默认定位父级没有再上一级定位父级了,因此是到windowview的距离)
(x:pos.offsetLeft + mask.offsetLeft  
 y:pos.offsetTop + mask.offsetTop)
3.上面还有问题如果嵌套很多个盒子,怎么最终一层一层解析计算一个最内层子元素到windowview的距离

方法1:计算一个子元素最终可以到window左上角位置的x(left) ,y(top)相对位置封装函数模板：(适合多层套娃的子盒子)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W3BFytCu-1620308920827)(C:\Users\tuyue\AppData\Local\Temp\1618319533550.png)]
//寻找一个元素最终到window对象的相对位置.
//计算一个子元素最终可以到windowview左上角位置偏移量封装函数模板集合,
// getPosition(oMask).left;
// getPosition(oMask).top;
function getPosition (element) {
     
  var pos = {
     
    left: 0,
    top: 0
  }
  while (element.offsetParent) {
     
    pos.left += element.offsetLeft;
    pos.top += element.offsetTop;
    element = element.offsetParent;
  }
  return pos;
}
//最终升级版
function getElementPosition(e) {
    
    var x = 0, y = 0;
    while (e != null) {
    
        x += e.offsetLeft;//获取子元素到定位父级的x,一直累加出去直到window
        y += e.offsetTop; //获取子元素到定位父级y,一直累加出去直到window
        e = e.offsetParent; // 获取最近的祖先定位元素
    }
    return {
    
        x: x,
        y: y
    };
}

/*
// mask的真实最终偏移位置X坐标 = mask原始x的位置(starPos.left) + 偏移量diffX
// mask的真实最终偏移位置Y坐标 = mask原始x的位置(starPos.top)  + 偏移量diffX
//如下图: mask的真实最终偏移位置fiddL = ol原始自身里父级的坐标位置  + diff鼠标按完时的偏移量即拖拽了的多长
*/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ytTMjYst-1620308920830)(C:\Users\tuyue\AppData\Local\Temp\1618334899060.png)]

方法2:offsetLeft和offsetTop拿到离上一级定位父级的x和y的坐标.(只适合单层嵌套的子元素)
'mousedown': function (e) {
     
        if (e.target.tagName.toLowerCase() === 'span') {
     
          this.isDown = true;
          this.startPos.x = e.clientX;
          this.startPos.y = e.clientY;
          this.startPos.left = e.target.offsetLeft;//这里拿到离上一级定位父级的x的坐标
          this.startPos.top = e.target.offsetTop;//这里拿到离上一级定位父级的Y的坐标
          this.targetEle = e.target;
          this.targetEle.classList.add('active');
        }
      },
      //
      'mousemove': function (e) {
     
        if (this.isDown) {
     
          var collisionArr = [];
          var _x = e.clientX - this.startPos.x;
          var _y = e.clientY - this.startPos.y;
          this.targetEle.style.left = this.startPos.left + _x + 'px';
          this.targetEle.style.top = this.startPos.top + _y + 'px';
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bWRTpiax-1620308920833)(C:\Users\tuyue\AppData\Local\Temp\1618334754362.png)]

如图所示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V8SO9fMs-1620308920838)(C:\Users\tuyue\AppData\Local\Temp\1618334899060.png)]
方法3:计算获取元素到定位/结构父级的相对位置的top和left属性第二个方法,前提是当前有绝对定位父级/相对定位.(适合就只是单层)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CRIsrd2M-1620308920841)(C:\Users\tuyue\AppData\Local\Temp\1618319502611.png)]
//先获取元素实际样式的自身实际位置.
function getStyle (obj, attr) {
    
  return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}


//然后再用鼠标偏移量 + 实际实际位置.
oMask.addEventListener("mousedown",function(e){
     
     
      startPos.x = e.clientX;
      startPos.y = e.clientY;
    
      startPos.left = parseInt(getStyle(oMask,'left')); //实际的相对位置x(left)
      startPos.top = parseInt(getStyle(oMask,'top')); //实际的相对位置的y(right01)
      isDown = true;//鼠标按下后,最后才开始开启鼠标移动,解开封锁
    } ,false)

四.当前元素盒子的滚动宽高和滚动距离

1.scrollWidth/scrollHeight

这个方法返回元素内容区域的宽高 + padding + 溢出内容尺寸

如果元素是根节点document.documentElement，返回的是视口滚动区域宽度和视口宽度中较大的那个
如果元素是body节点 document.body，并且是在混杂模式下，那么返回的是视口滚动区域宽度和视口宽度中较大的那个

根节点document.documentElement > document.body区别?

document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight
<!--
 * @Author: your name
 * @Date: 2020-08-15 16:06:47
 * @LastEditTime: 2020-08-15 20:47:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \案例\case00.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面滚动位置</title>
  <style>
    * {
   
      margin: 0;
      padding: 0;
    }

    body {
   
      height: 10000px;
    }

    .wrap {
   
      overflow: auto;
      width: 200px;
      height: 300px;
      padding: 10px;
      margin: 100px auto;
      border: 1px solid red;
    }
  </style>
</head>

<body>

  <div class="wrap">
    你好 我是海牙老师 巴拉啦小魔仙 变身
    你好 我是海牙老师 巴拉啦小魔仙 变身
    你好 我是海牙老师 巴拉啦小魔仙 变身
    你好 我是海牙老师 巴拉啦小魔仙 变身
    你好 我是海牙老师 巴拉啦小魔仙 变身
    你好 我是海牙老师 巴拉啦小魔仙 变身
    你好 我是海牙老师 巴拉啦小魔仙 变身
    你好 我是海牙老师 巴拉啦小魔仙 变身
    你好 我是海牙老师 巴拉啦小魔仙 变身
    你好 我是海牙老师 巴拉啦小魔仙 变身
    你好 我是海牙老师 巴拉啦小魔仙 变身
    你好 我是海牙老师 巴拉啦小魔仙 变身
    你好 我是海牙老师 巴拉啦小魔仙 变身
  </div>
  <script src="js/common.js"></script>
  <script>

    /*
      滚动高度
        scrollHeight = height + 溢出内容的高度 + padding


        document.body.scrollHeight body的高度+不可见内容高度 +padding


        document.documentElement.scrollHeight 
        整个文档 根节点 :root html


      clientWidth(不包括边框的元素宽度) clientHeight(不包括边框的元素高度) 
      clientLeft(左边框的宽度) clientTop (上边框宽度)

     */

    var oWrap = $('.wrap');

    console.log(oWrap.clientTop, oWrap.offsetHeight); //1单纯边框 , 322实际高度

    console.log(document.body.scrollHeight, document.documentElement.scrollHeight); //10000,10100

    console.log(document.body.scrollTop || document.documentElement.scrollTop); //0
  </script>
</body>

</html>

2.scrollLeft/scrollTop

这个方法返回元素滚动条所处的位置

如果元素是根元素，那么返回 window.scrollY 的值
如果元素是 body，并且在混杂模式下，那么返回的是 window.scrollY 的值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7yE5HcIU-1620308920844)(C:\Users\tuyue\AppData\Local\Temp\1618766452158.png)]

因此可用于处理页面滚动的距离的兼容

四.汇总坐标偏移量

技巧:(Left/top都是奇葩的,到定位父级位置/单纯边框位置/ 滚动条位置)

技巧:(width/height都是正常的,实际全部宽高 / 两不包宽高 / 滚动了多宽多高)

1.(offset系列)

offsetParent用于获取定位的父级元素
offsetParent和parentNode的区别? 一个是定位父级 ,一个是结构父级

var box = document.getElementById('box');
console.log(box.offsetParent); //获取定位父级,不是结构父级,结构父级是parentNode/parentElement

console.log(box.offsetLeft);//获取元素到定位父级的x坐标距离
console.log(box.offsetTop);//获取元素到定位父级的y坐标距离

console.log(box.offsetWidth); //获取元素自身的实际全部宽
console.log(box.offsetHeight); //获取元素自身的实际全部高

在这里插入图片描述

2.Client系列内容区域大小

var box = document.getElementById('box');
console.log(box.clientLeft); //单纯获取边框宽度
console.log(box.clientTop); //单纯获取边框高度

console.log(box.clientWidth); //获取元素的两不包宽高
console.log(box.clientHeight);//获取元素的两不包宽高

在这里插入图片描述

3.滚动偏移(sroll系列)

var box = document.getElementById('box');
console.log(box.scrollLeft)//返回元素滚动条的位置.
console.log(box.scrollTop)

console.log(box.scrollWidth) //返回元素内容区域的宽高 + padding + 溢出内容尺寸
console.log(box.scrollHeight)

在这里插入图片描述

五.究极坐标偏移量精华汇总:


//offset系列:获取元素的宽,高,left,top, offsetParent//获取定位父级元素
offsetWidth:元素自身的宽,有边框
offsetHeight:元素自身的高,有边框
offsetLeft:元素距离定位父级左边线位置的值
offsetTop:元素距离定位父级上边线位置的值

//scroll系列:卷曲出去的值
scrollLeft:向左卷曲出去的距离
scrollTop:向上卷曲出去的距离
scrollWidth:元素中内容的实际的宽(如果内容很少或者没有内容, 元素自身的宽),没有边框
scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框


//client系列:可视区域
clientWidth:可视区域的宽(没有边框),边框内部的宽度
clientHeight:可视区域的高(没有边框),边框内部的高度
clientLeft:左边边框的宽度
clientTop :上面的边框的宽度

三.拖拽盒子高级案例:

①event鼠标偏移位置综合案例简单版:拖拽盒子

我写得很详细自己细品:

//common.js封装好的方法
//获取元素对象下标
function getElementIdx (item) {
   
  var elements = item.parentNode.children;
  for (var i = 0, len = elements.length; i < len; i++) {
   
    if (item === elements[i]) {
   
      return i;
    }
  }
}

//设置任意的标签中间的任意文本内容
function setInnerText (element, text) {
   
  var key = element.textContent == "undefined" ? 'innerText' : 'textContent';
  element[key] = text;
  // //判断浏览器是否支持这个属性
  // if (typeof element.textContent == "undefined") {//不支持
  //   element.innerText = text;
  // } else {//支持这个属性
  //   element.textContent = text;
  // }
}

//获取元素实际样式
function getStyle (obj, attr) {
   
  return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}

//querySelector
function $ (ele) {
   
  return document.querySelector(ele);
}

//querySelectorAll
function $$ (ele) {
   
  return document.querySelectorAll(ele);
}



function addEventListener (element, type, fn) {
   
  if (element.addEventListener) {
   
    //标准浏览器写法
    element.addEventListener(type, fn, false);
  } else if (element.attachEvent) {
   
    //IE兼容写法
    element.attachEvent("on" + type, fn);
  } else {
   
    //on绑定写法
    element["on" + type] = fn;
  }
}


function r

最低0.47元/天解锁文章

AKA俄语人Лев

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
自学js第十五天:event坐标偏移量位置和window对象

一.Event对象集合中的鼠标按下或者点击时的相对位置:!=元素的自身位置1.鼠标event对象给我们展示了 client / offset / page / screen系列的X Y坐标可以用于在不同需求下获取用户鼠标的相对位置.(相对于各种参考物体的位置)2.首先先了解鼠标event其实是一个事件对象集合来的,里面包含各种各样的鼠标事件的信息.其中就有当前用户点击鼠标触发事件的相对位置坐标. 比如如下的pageX,和 pageY[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来
复制链接

扫一扫