JavaScript鼠标事件及event坐标

一、事件
1、onclick

事件会在对象被点击时发生
请注意: onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才触发的。

2、onmousedown

事件会在鼠标按键被按下时发生

3、onmouseup

事件会在鼠标按键被松开时发生

4、onmousemove

事件会在鼠标指针移动时发生

5、onmouseover

事件会在鼠标指针移动到指定的对象上时发生

6、onmouseout

事件会在鼠标指针移出指定的对象时发生

二、event中各坐标含义
1、offsetX、offsetY

offsetX:设置或获取鼠标点击位置相对于触发事件对象的水平(X)距离
offsetY:设置或获取鼠标点击位置相对于触发事件对象的垂直(Y)距离

2、clientX、clientY

clientX:设置或获取事件被触发时鼠标指针相对于浏览器可视区域(不计算水平滚动的距离)的水平(X)坐标
clientY:设置或获取事件被触发时鼠标指针相对于浏览器可视区域(不计算水平滚动的距离)的垂直(Y)坐标

3、pageX、pageY

pageX:设置或获取事件被触发时鼠标指针相对于浏览器的水平(X)坐标,也就是clientX加上水平滚动条的距离
pageY:设置或获取事件被触发时鼠标指针相对于浏览器的垂直(Y)坐标,也就是clientY加上垂直滚动条的距离

4、screenX、screenY

screenX:设置或获取事件被触发时鼠标指针相对于用户屏幕的水平(X)坐标
screenY:设置或获取事件被触发时鼠标指针相对于用户屏幕的垂直(Y)坐标

5、x、y

x:设置或获取事件被触发时鼠标指针相对于父元素的水平(X)坐标
y:设置或获取事件被触发时鼠标指针相对于父元素的垂直(Y)坐标

6、layerX、layerY

条件:触发事件对象未设置 position: relative(相对定位)或 position: absolute(绝对定位)
layerX:设置或获取事件被触发时鼠标指针相对于浏览器的水平(X)坐标
layerY:设置或获取事件被触发时鼠标指针相对于浏览器的垂直(Y)坐标
条件:触发事件对象设置了 position: relative(相对定位)或 position: absolute(绝对定位)
layerX:设置或获取事件被触发时鼠标指针相对于触发事件对象的水平(X)坐标
layerY:设置或获取事件被触发时鼠标指针相对于触发事件对象的垂直(Y)坐标

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 只要走在前面 眼泪就追不上我
    冗犬1999阅读 151评论 0 1
  • 费登奎斯——这个名字我听到大概有半年多了,是我的健身教练新学的一项高端练习,但是我一直不敢尝试,因为价格也是很高端...
    紫梦听风阅读 1,486评论 0 2
  • Spring MVC 在数据绑定的过程中,需要对传递数据的格式和类型进行转换,它既可以转换 String 类型的数...
    辽A丶孙悟空阅读 1,108评论 0 16
  • 惊蛰,开学日。由于昨天的春雷加春雨,原计划去学校做开学前的准备就取消了,虽然都想好怎样装扮教室,如何夸张自己的语言...
    野百合c阅读 208评论 0 1