JavaScript中鼠标event的位置(clientX,layerX,x,offsetX等)

最新推荐文章于 2024-03-09 21:02:00 发布
最新推荐文章于 2024-03-09 21:02:00 发布 · 299 阅读 · 0
文章标签：

#javascript #ViewUI

本文详细介绍了JavaScript中用于获取鼠标位置的六对属性，包括它们的参考点和浏览器兼容性情况。这些属性对于实现交互式网页效果至关重要。

JavaScript中的event对象一共有六对鼠标位置的属性。分别如下：

属性对参考点浏览器兼容性
clientX，clientY 浏览器窗口所有

layerX，layerY

最近的绝对定位的父节点，如果没有，则为documentFirefox，Chrome，Safari
offsetX，offsetY事件目标对象所有，Firefox除外
pageX，pageYdocument对象所有，IE除外
ScreenX，ScreenY计算机屏幕所有
x,y尽量不要用它，兼容性差IE9及以下

iteye_12675
关注
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
lzding的博客
05-02 5万+
通过 2 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持：
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
12-09
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将深入探讨这些属性的含义、用途及其在不同浏览器中的差异。 1. ...
【鼠标事件 MouseEvent】clientX clientY offsetX offsetX pageX screenX screenY
ColdCoder的博客
06-15 1430
鼠标事件 MouseEvent
JS模拟鼠标点击事件详解 MouseEvent
czw15913934496的博客
01-11 1万+
然后，创建一个新的MouseEvent对象，通过它模拟一个click事件，并将它分派给clickMe元素。无论您是想模拟单击事件、移动事件、弹出框事件还是其他事件，都可以使用JS的MouseEvent对象轻松实现。在上面的示例中，我们只是模拟了鼠标点击事件，而没有模拟松开鼠标的事件。除了模拟单击事件外，JS还可以模拟鼠标的移动事件。在上面的示例中，我们首先分发mousedown事件，然后立即分发onmouseup事件，以模拟鼠标点击并松开的行为。在JS中，还可以模拟其他类型的鼠标事件，如右击和双击事件。
研究MouseEvent中的clientX、offsetX、pageX、screenX
mtgr的博客
01-28 2809
    很多时候需要在鼠标点击的时候获取点击的坐标来处理一些逻辑，有时候clientX、offsetX、pageX用的也不清楚，特此做了一个实验来记录。 1.含义 clientX 提供应用程序客户区域内发生事件的水平坐标（与页面内的坐标相对） offsetX 鼠标指针在该事件与目标节点的填充边缘之间的X坐标中的偏移量 pageX 相对于整个文档的左边缘单击鼠标的X（水...
UI 事件与表单事件
langmanboy的博客
04-19 451
UI 事件与表单事件 1. 鼠标事件 1-1 事件类型 针对鼠标操作的行为有多种事件类型： mousedown/mouseup —— 在元素上点击/释放鼠标按钮 mouseover/mouseout —— 鼠标指针从一个元素上移入/移出 mousemove —— 鼠标在元素上的每个移动都会触发此事件 click —— 如果使用的是鼠标左键，则在同一个元素上的 mousedown 及 mouseup 相继触发后，触发该事件 dblclick —— 在短时间内双击同一元素后触发。如今已经很少使用了 conte
Pointer events 指针事件
最新发布
文摘资讯
03-09 1247
在JavaScript中，onpointermove是一个事件处理程序属性，用于处理指针移动事件。你可以将它与一个函数关联起来，以便在指针（通常是鼠标）移动时触发该函数。下面是一个简单的示例代码，演示如何在HTML中使用onpointermove：<!DOCTYPE html> <html> <head> <title>Pointer Mov...
JavaScript中获取鼠标位置相关属性总结
10-25
在现代浏览器中，推荐使用clientX和clientY来获取鼠标在视窗内的位置，使用pageX和pageY来获取鼠标在整个文档中的位置，而对于IE9及更新的浏览器，layerX和layerY是替代offsetX和offsetY的不错选择。在设计跨浏览器...
JavaScript取得鼠标绝对位置程序代码介绍
10-27
此外，`event.clientX` 和 `event.clientY` 表示的是相对于浏览器视口左上角的位置（不包含滚动距离），而`event.offsetX` 和 `event.offsetY`（IE）以及 `event.layerX` 和 `event.layerY`（Firefox）则是相对于...
鼠标事件MouseEvent对象的一些坐标属性总结
小赛赛爱吃肉
01-09 3985
MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown 等
图解鼠标事件的 ScreenX ，LayerX，clientX，PageX，offsetX，X
fang_my的博客
02-27 2606
这篇文章是由我随手做的笔记改编而来，笔记内容比较粗糙，转化为文章后个人感觉又重新复习了一遍，加深了很大的印象。如果该文章能帮助到一些人，也是一件幸事。可能我以后也会经常来翻阅自己的这篇文章～这几个属性确实容易搞混🤔。
Web前端之JavaScript的鼠标事件、坐标轴、定位、clientXY、offsetXY、screenXY、layerXY、pageXY
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
06-28 977
Web前端之JavaScript的鼠标事件、坐标轴、定位、clientXY、offsetXY、screenXY、layerXY、pageXY
非常有用的pointer-events属性
10-09 1880
pointer-events是css3的一个属性，指定在什么情况下元素可以成为鼠标事件的target（包括鼠标的样式）
day0330
pika521197的博客
03-30 183
day0330
js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY
热门推荐
蒲公英芽的博客
01-06 3万+
MouseEvent的类别有以下： mousedown 鼠标按下 mouseup 鼠标释放 click 左键单击 dblclick 左键双击 mousemove 鼠标移动 mouseover 鼠标经过 mouseout 鼠标滑出 mouseenter 鼠标进入 mouseleave 鼠标离开 contextmenu 右键菜单 注意： 执行顺序：mousedown —&g...
js事件对象Event，layerX与offsetX的区别
alize的博客
08-20 3612
offsetX： 获取到的是鼠标触发点相对于目标事件元素(被触发DOM)左上角的距离(确切的说是到边框外边界的距离)，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。 layerX： 获取到的是鼠标触发点相对于offsetParent元素左上角的距离(确切的说是到边框外边界的距离)，包括中间所有元素的padding、margin、b...
pointer-event属性详解
小太阳的博客
10-24 736
pointer-event属性详解
js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别
javaloveiphone的专栏
03-22 9737
pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,同一个元素坐标不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,即是以浏览器滑动条此刻的滑动到的位置为参考点,同一个元素坐标随滑动条移动而变化.注： 1、如果元素位于body中，e.clientX + document.body.scrollLeft - document.body.clientLeft = e.p
javascript坐标
Ivan Song的专栏
07-28 1753
 clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 screenX 设
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值