e.offsetX e.offsetY、e.clientX e.clientY 、e.clientX,e.clientY

最新推荐文章于 2021-07-02 21:55:14 发布
最新推荐文章于 2021-07-02 21:55:14 发布
阅读量434 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： e.offset
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40628308/article/details/93738252

IE、Safari、Chrome 和 Opera 支持 screenLeft
和 screenTop而Chrome、Firefox 和 Safari 支持 screenX 和 screenY

详情图

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
lzding的博客
05-02 5万+
通过 2 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持：
event.X和event.clientX的区别分析
09-05
- `offsetX`和`offsetY`：相对于触发事件的元素的鼠标位置坐标。 - `screenX`和`screenY`：相对于屏幕的鼠标坐标，包括浏览器窗口之外的部分。 在处理复杂的交互和用户输入时，理解这些属性可以帮助我们更精确地...
e.clientX,e.clientY,e.pageX,e.pageY,e.offsetX,e.offsetY,e.screenX,e.screenY
测试0901-1
01-29 1127
e.clientX,e.clientY, e.pageX , e.pageY , e.offsetX , e.offsetY , e.screenX , e.screenY 欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ 声明：参考文档你是如何理解var e=e||window.event的 刚才写博客《ja...
js e.offsetX 和 e.offsetY
JDDDDDDyaya的博客
11-07 2379
本人自己在写代码的过程中，一直对e.offsetX 与 e.offsetY 分不清，今天好好探究一下e.offsetX 与 e.offsetY e.offsetX 与 e.offsetY 下相对与事件源的距离，也就是e.target， 大家看下面例子,给出几张截图。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name
五子棋中如何理解e.offsetX 和e.offsetY
速冻的博客
06-10 779
chess.onclick = function (e) { if (over) { return; } if (!me) { return; } //悔棋功能暂时不做 //backbtn.className = backbtn.classNa...
e.offsetX/e.clientX/e.pageX的区别
weixin_30267691的博客
06-30 510
e.offsetX/e.clientX/e.pageX/e.screenX的区别 没有标注的是各浏览器都支持的： e.offsetX：鼠标相对于事件源的X方向的距离( firfox 不支持) e.offsetY：鼠标相对于事件源的Y方向的距离( firfox 不支持) e.clientX：距离浏览器可视区域X方向的距离 e.clientY：距离浏览器可视区域Y方向的距离 e.pageX：鼠标...
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
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('我...
补全下面的html和css代码，实现这个功能可以分为两个步骤： 实现小球的拖拽 可以通过监听小球的mousedown、mousemove和mouseup事件，实现小球的拖拽。具体实现方法如下： 复制 var ball = document.getElementById("ball"); var container = document.getElementById("container"); var isDragging = false; var offsetX = 0; var offsetY = 0; ball.addEventListener("mousedown", function(e) { isDragging = true; offsetX = e.offsetX; offsetY = e.offsetY; }); document.addEventListener("mousemove", function(e) { if (isDragging) { var x = e.clientX - offsetX; var y = e.clientY - offsetY; ball.style.left = x + "px"; ball.style.top = y + "px"; } }); document.addEventListener("mouseup", function() { isDragging = false; }); 判断小球是否移动到框里 可以通过判断小球是否与框的边界相交，来判断小球是否移动到框里。具体实现方法如下： 复制 var ballRect = ball.getBoundingClientRect(); var containerRect = container.getBoundingClientRect(); if ( ballRect.left >= containerRect.left && ballRect.right <= containerRect.right && ballRect.top >= containerRect.top && ballRect.bottom <= containerRect.bottom ) { // 小球在框里 } else { // 小球不在框里 } 把这两个步骤结合起来，就可以实现拖拽小球移动到框里的功能了。
05-28
var x = e.clientX - offsetX; var y = e.clientY - offsetY; ball.style.left = x + "px"; ball.style.top = y + "px"; } }); document.addEventListener("mouseup", function() { isDragging = false; ...
详解x,offsetX clientX screenX,pageX与y,offsetY clientY screenY,pageY的区别
为了准确获取鼠标相对于不同坐标系的位置，HTML提供了多种属性，如offsetX,clientX,screenX,pageX,y,offsetY,clientY,screenY,pageY等。本文将详细分析这些属性之间的区别及其在开发中的应用场景。 ### offsetX和...
理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
qq_731445005的博客
03-14 674
event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性event.pageX、event.pageY类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。event.o...
[JavaScript] 理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
DaftJayee的博客
09-17 2724
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 event.offsetX、event.offsetY 鼠标相对于事件源元素（srcElement）的X,Y坐标，只有
clientX、screenX、pageX、offsetX、layerX
web_hua的博客
10-15 409
e.pageX——参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 e.layerX——鼠标位置相对当前坐标系的border左上角开始的坐标 e.offsetX——鼠标位置相对当前坐标系的border左上角开始的坐标 e.clientX——鼠标位置相对可视区域的坐标 e.screenX——鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原
原生js事件对象e的clientX、clientY、pageX、pageY
u010234868的专栏
07-02 922
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; /*添加高度使其出现滚动条*/ height: 1000px; } #box { width: 200px; height: 200px; bac.
offsetX、clientX、pageX等位置的计算
风火一回，一生不毁
06-01 5127
1.常见的事件位置属性 e.pageX——相对整个页面的坐标 注意:IE6、IE7、IE8无该属性 e.layerX——相对当前坐标系的border左上角开始的坐标 注意：在opera、IE6、IE7、IE8中这个属性，而IE8以上表示相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离 e.offsetX——相对当前坐标系的
e.clientX e.clientY,e.pageX e.pageY,e.offsetX e.offsetY的三种含义以及小demo，补充知识.children, .onmousemove
weixin_48727085的博客
08-26 435
//显示的数值表示距离可视区的水平，数值方向上的距离 console.log(evt.clientX); console.log(evt.clientY); //显示的数值表示距离页面的水平，数值方向上的距离 //这里解释一下页面和可视区 //当页面很大时，页面通过滚动条滚动展示，展示的区域称为可视区 console.log(evt.pageX); console.log(evt.pageY); //显示的数值表示距离事件源的水平，数值方向上的距离 ...
深入理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
juceli的博客
07-24 1280
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 ...
有关位置问题：原生JS e.clientX e.pageX JQ中offset() position()
lidiansheng的专栏
03-08 7365
注：因为我们要在 MSIE 和其他浏览器下运行，Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置，如果你有一个 500*500 的窗口并且你的鼠标在绝对中间，那么 pageX 和 pageY  的值都是 250，如果你向下滚动  500， 那么 pageY 将变成 750。 MSIE 正好相反，它使用 event.clientX
理解e.clientX、e.clientY、e.pageX、e.pageY、e.offsetX、e.offsetY、e.screenX、e.screenY
kehukehu_kehu的博客
06-09 911
e.clientX、e.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 e.pageX、e.pageY 类似于e.clientX、e.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 e.offsetX、e.offsetY 鼠标
JavaScript深入解读：window.event对象
- `offsetX`和`offsetY`: 鼠标相对于触发事件的元素边界的坐标。 - `propertyName`: 在DOM事件中，此属性用于标识改变的属性名称。 - `returnValue`: 可以用来阻止事件的默认行为，设置为`false`即可阻止。 - `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值