event.x,event.clientX,event.offsetX区别

最新推荐文章于 2024-11-12 08:18:23 发布
最新推荐文章于 2024-11-12 08:18:23 发布
阅读量2.4k 收藏
点赞数
分类专栏： css 文章标签： border table
本文详细解释了不同鼠标事件坐标系的概念，包括x、clientX、offsetX及screenX等，并通过一个具体的示例展示了这些坐标在实际应用中的区别。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。
offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
screenX:相对于用户屏幕。

 

事例代码：

<table border=1 cellpadding=15 cellspacing=15 style="position:relative;left:100;top:100">
<tr><td>
<div onclick="show()" style="background:silver;cursor:hand">
Click here to show.
</div>
</td></tr>
</table>
<script>
function show(){
alert("window.event.x:"+window.event.x+

"/nwindow.event.y:"+window.event.y+

"/nevent.clientX:"+event.clientX+

"/nevent.clientY:"+event.clientY+

"/nevent.offsetX:"+event.offsetX+

"/nevent.offsetY:"+event.offsetY+

"/nwindow.event.screenX:"+window.event.screenX+

"/nwindow.event.screenY:"+window.event.screenY);
}
</script>

event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 1101
现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。 用途：待发现 clientX|clientY和pageX|pageY clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于cs.
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
09-05 391
通过 3 张图和 1 张表格，轻松区别JavaScriptEvent 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 一、测试代码如下： <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-...
event.offsetX ,事件
qq_45505241的博客
11-07 2524
事件的offsetX属性
刘利新西安
06-13 784
Sets or retrieves the x-coordinate of the mouse pointer relative to the top-left corner of the offsetParent element of the element that fires the event. Use the srcElement property to get the element
JS图解event.offsetX，event.clientX，event.pageX，event.screenX
hys__handsome的博客
10-25 573
event.X和event.clientX的区别分析
09-05
总的来说，`event.clientX`和`event.X`的主要区别在于它们的坐标参考系不同，`clientX`始终基于浏览器的可视窗口，而`event.X`在定位属性为"relative"时会基于触发事件的元素。在编写JavaScript事件处理函数时，正确...
js window.event对象详尽解析
10-30
4. `clientX` 和 `clientY`: 这两个属性分别返回鼠标在浏览器窗口可视区域（不包括滚动条）内的X和Y坐标，是只读属性，用于获取鼠标位置。 5. `ctrlKey`: 类似于`altKey`，`event.ctrlKey`用于检查`Ctrl`键的状态。...
var box = document.querySelector('.box') var box1 = document.querySelector('.box1') box.onmousedown = function (e) { var e = e || window.event var e = event.offsetX var d = event.offsetY console.log(e) console.log(d) } box1.onmousemove = function (e) { var e = e || window.event var x =event.offsetX var y =event.offsetY console.log(x) console.log(y) box.style.left = x + 'px' box.style.top = y + 'px' } box1.onmouseup = function () { console.log('我要取消了移动事件') box1.onmousemove = null } 这段代码的错误
05-26
var x = e.clientX - offsetX; var y = e.clientY - offsetY; console.log(x); console.log(y); box.style.left = x + 'px'; box.style.top = y + 'px'; } box1.onmouseup = function () { console.log('我...
event.clientX 无法使用
06-01
如果 event.clientX 也无法使用，可能是以下原因： 1. 事件对象不是鼠标事件，而是键盘事件或其他事件，因此无法获取鼠标位置信息。 2. 事件对象不存在，或者没有正确地传递给事件处理函数。可以在事件处理函数中...
event对象的offsetX、clientX、pageX、screenX及 window.innerWidth、outerWidth使用详解
lwx931449660的博客
05-12 1460
offset offsetX、offsetY为当前鼠标点击位置距离当前元素参考原点（左上角）的距离，而不同浏览器参考原点的位置不尽相同，FF及Chrome中参考原点为内容区域左上角，不包含元素边框 offsetX 鼠标当前点击位置距离当前点击元素内容区域最左边（不包含边框）的距离 offsetY 鼠标当前点击位置距离当前点击元素内容区域最上边（不包含边框）的距离 点击不同位置，参考原点不同，则距离不同 以下四个点可供理解offset的相对位置及尺寸 client...
说一下event.x,event.clientX,event.offsetX区别
jamm1986的专栏
07-17 262
解释一下event.X和event.clientX有什么区别？ event.clientX返回事件发生时,mouse相对于客户窗口的X坐标 event.X也一样 但是如果设置事件对象的定位属性值为relative event.clientX不变 而event.X返回事件对象的相对于本体的坐标 x:设置或者是得到鼠标相对于目标事件的父...
js event.x,event.clientX,event.offsetX区别
xiongzhengxiang的专栏
11-30 1051
blog:xiongzhengxiang interest:inovation and thinking test testeventx = function(e){ alert(e.tagName); alert("e.x is "+ e.x); alert("e.clientX is " +e.clientX);
event事件坐标详解（clientx， offsetx， screenX等）
zlzbt
07-23 8974
鼠标事件（e=e||window.event） event.clientX、event.clientY (相对浏览器窗口) //鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 function getMousePos(event) { var e = event || window.event; return {'x':e.clientX,'y':clientY} } clientX与client..
请说说event.clientX、event.clientY、event.offsetX、event.offsetY之间的关系
最新发布
王铁柱666的博客
11-12 528
是与鼠标事件相关的属性，它们提供了关于鼠标指针在触发事件时的位置信息。
区分event对象中的[clientX,offsetX,screenX,pageX]
嘿嘿
07-06 1030
前言 在平时的开发中，非常讨厌的就是兼容性了，兼容性的问题总会让我们记忆混淆，所以这次来区分一下event对象中的常用获取鼠标位置。 clientX clientY event.clientX event.clientY client直译就是客户端，客户端的窗口就是指游览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。 event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。 client范围 兼容性：IE和主流游览器都支持。 offse
【javascript坐标】——event.x、event.clientX、event.offsetX、event.screenX 用法
严文文 Chris
07-04 2060
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。screenX 设置或获取获取鼠...
JavaScript深入理解window.event事件
<body onmousemove="window.status='X=' + event.clientX + ' Y=' + event.clientY"> ``` 3. **注意事项**： - 不是所有浏览器都支持`window.event`，尤其是非IE浏览器。在现代浏览器中，事件作为参数传递给...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值