事件易混知识点

秒速五厘米 2022-02-24 09:08 218阅读 0赞

1.  offsetX / offsetY 为 鼠标事件 ，得到距离 事件源 左端 和 顶端 的距离。
    
    着重注意点：  
    1.可以获取行内及内嵌的宽高  
    2.获取到的值是一个number类型，不带单位  
    3.获取的宽高包含border和padding  
    4.只能读取，不能设置
    
    offsetWidth / offsetHeight 为 节点的 宽高。 （注意：元素的实际宽高 = width + border + padding）
    
    offsetLeft / offsetTop 为 获取标签元素 距离 已定位父级元素 左端 和顶端距离。
    
    注意 ：距离是 左/上 外边框 与 offsetParent（已定位父级） 的 左/上 内边框。
2.  clientX / clientY 为 鼠标事件， 得到距离 可视化窗口 左端 和 顶端 的距离。
    
    clientWidth / clientHeight：获取 可视区域的宽高。（注意，不含边框只有 padding + content）
    
    clientTop / clientLeft : 不常用，其实就是 左边框 border-left 和上边框 border-top。
3.  其中，两者之间的结合，可以产生化学反应，得到很多想要的距离。
    
    比如，获得点击事件距离与节点中心点的距离：
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70]  
    这里，有个地方需要注意一下即，若获取到窗口的距离，一般通过 client 来处理，但在这里，由于点击的 事件源 为 body ，则 offset 也可以到达窗体端点，但是仍要理清两者不同！（参考上面分析）  
    纠正一下错误，offset与client中，只有offsetX/Y 鼠标事件可以直接获取到距 可视区域的距离 。  
    若要得到 节点到 可视区域边界的距离 可以通过  
    getBoundingClientRect() 来获取，

这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

var box=document.getElementById(‘box’); // 获取元素

alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70]: /images/20220224/ae4b0690d4fc4cb392d791b30ba1971c.png