offset client 的区别

一、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();
      }
    }