offset client 的区别

原创已于 2023-04-04 14:54:56 修改 · 362 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2022-07-26 16:25:23 首次发布

本文详细介绍了DOM中的offsetWidth/Height和clientWidth/Height的区别，以及offsetTop/Left和clientTop/Left的用法。同时，讲解了getBoundingClientRect方法在获取元素位置上的作用。此外，阐述了oncontextmenu事件、event.preventDefault()的用途，以及event.target.nodeName用于获取元素标签名的功能。还讨论了焦点管理、CSS样式获取及事件阻止传播的方法。最后，详细解析了键盘事件的顺序，以及如何在keypress事件中阻止非数字字符输入。

一、offsetwidth（height）与clientwidth（height）

1.offsetwidth：边框 + 内边距 + 内容区的总体宽度；

2.clientwidth：内边距 + 内容区的总体宽度；

offsetheight与clientheight同理。

二、offsettop（left）与clienttop（left）

1.offsettop：是元素与其最近的定位的父元素之间的距离（父元素边框到子元素边框）；

2.clienttop：元素的边框大小；

left同理。

三、offsetX（Y）与clientX（Y）

1.offsetX：鼠标与其点击的元素的距离（边框到鼠标的距离）；

2.clientX：鼠标与浏览器的距离；

Y同理

四、getBoundingClientRect（）：即使父元素定位也能得到元素到浏览器的距离。

五、oncontextmenu：鼠标右键单机事件

六、event.preventDefault()：消除浏览器默认事件结果

七、event.target.nodeName：得到当前事件下的元素的标签名

八、focus()获得焦点、、onblur 失去焦点事件、、tabindex 使元素能够获得焦点

九、

window.getComputedStyle(element, null).属性名

十、event.stopPropagation(); 可以阻止事件冒泡或捕获的传递。

十一、

按键事件的触发顺序是：keydown - keypress - keyup。

keypress触发的条件是：按键必须有字符输出。

字符在什么时候输出：keydown - keypress - （keypress正常结束后输出字符） - keyup

要阻止按键输出字符，必须要在 keydown、keypress事件中阻止

要统计字符数量，必须在keyup事件中统计

如果需要屏蔽某些（非数字）字符的输入，可以在keypress（排除了功能键）中做处理：

uid.onkeypress = function (e) {
      let code = e.keyCode || e.charCode || e.which
      //阻止非数字字符的输入
      if (code < 48 || code > 57) {
        e.preventDefault();
      }
    }