cliientX/layerX/offsetX等鼠标事件的参数

在js中,clientX,offsetX等后面是X,y是表示位置,后面Width、Height的是宽高。

这篇文章说说鼠标事件中的这些参数。
一.鼠标指针位置

  1. clientX clientY X Y 指针距离可视区域左上角位置
  2. offsetX offsetY 相对事件目标对象的左上角位置
  3. layerX layerY
    如果目标对象是定位方式,值于offset相似,如果目标对象是非定位方式, 取父容器的左上角位置,如果父容器未定位,继续向上取
    4.pageX pageY 仅用于mousemove事件 这个值是鼠标移动时相对上次获取坐标的距离
  4. screenX screenY 相对屏幕左上角位置

二.按键点击鼠标,这些值变成true
altKey: false
ctrlKey: false
metaKey: false
shiftKey: false

三.判断鼠标按的是哪个键
左键 中键 右键
button: 0 1 2
buttons: 0 4 2
which: 1 2 3

四.补充
获取元素距离可视窗口的位置
比如获取div距离可视窗口的位置:div.getBoundingClientRect();

原文地址:https://www.cnblogs.com/94-Lucky/p/13347282.html