event事件尺寸和位置

于 2024-01-05 23:35:37 发布
阅读量408 收藏 6
点赞数 11
分类专栏： js 事件 文章标签： javascript 开发语言 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46822304/article/details/135419678
版权
js 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
事件
3 篇文章 0 订阅
订阅专栏

event事件尺寸和位置

1. clientX与clientY

事件触发，鼠标点击位置，相对于浏览器坐标，浏览器左上角是（0，0）
在这里插入图片描述

2. pageX与pageY

事件触发，鼠标点击位置，相对于页面位置
浏览器页面滚动 ，那么点击位置相对于页面左上角（0，0）位置, 会大于clientX与clientY
浏览器页面不滚动，pageX=clientX pageY=clientY

3. screenX与screenY

事件触发，鼠标点击位置，相对于屏幕左上角（0，0）位置
在这里插入图片描述

offsetX与offsetY

鼠标点击位置相对于当前dom对象左上角（0，0）位置计算
在这里插入图片描述

夜弥不迷夜
关注
  • 11
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
event获取页面鼠标点击位置坐标
yolly
02-06 2662
function show_coords(event) { x=event.clientX y=event.clientY alert("X 坐标: " + x + ", Y 坐标: " + y) } 请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。
View和Event位置改变方法
开发笔记
08-18 1441
View： getLeft：相对于父布局，该View距离父布局 左边缘 的距离（px）； getTop：相对于父布局，该View距离父布局 上边缘 的距离（px）； getRight：相对于父布局，该View距离父布右边缘的距离（px）； getBottom：相对于父布局，该View距离父布局下边缘的距离（px）； getTranslationX：相对于父布局，该Vi
JavaScript鼠标事件对象中的坐标位置（客户区、页面、屏幕）详解及区别
TalonZhang的博客
11-20 985
坐标位置包括客户区坐标位置、页面坐标位置、屏幕坐标位置。 客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中，分别表示事件发生时鼠标指针在视口中的水平和垂直坐标。 所有的浏览器都支持这两个属性。 用法： var div = document.getElementById('myDiv'); EventUtil.ad...
event事件坐标详解（clientx， offsetx， screenX等）
zlzbt
07-23 8018
鼠标事件（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..
js的clientX、pageX、screenX等方法来获取鼠标坐标详解
最新发布
weixin_41652495的博客
09-26 1481
记录js的clientX、pageX、screenX
html事件改变矩形大小
11-22
HTML事件是指在网页中，当用户与网页元素交互或浏览器执行特定操作时触发的脚本事件。...在处理文本时，需要考虑宽度和高度的独立调整，这可能涉及到对原始尺寸的保存以及根据矩形尺寸变化的比例来更新文本样式。
ie与firefox下的event使用说明与详细区别
12-01
在获取鼠标当前位置方面，IE浏览器使用`event.x`和`event.y`，而Firefox则使用`event.pageX`和`event.pageY`。为了确保兼容性，开发者通常会使用`event.clientX`和`event.clientY`，这两个属性在IE和Firefox中都可用...
fullcalendar：完整尺寸的拖放事件日历
02-16
4. **事件处理**：通过监听`eventDrop`和`eventResize`事件，可以实现拖放和缩放事件的功能。这些事件回调函数会提供有关新位置和旧位置的信息，以便更新后端数据。 5. **拖放功能**：启用拖放功能需设置`draggable...
event_registration_system.zip_event_gladox8_php_position9ew
09-24
【标题】"event_registration_system.zip_event_gladox8_php_position9ew" 暗示这是一个用于事件注册系统的压缩文件，可能包含使用Gladox8框架、PHP编程语言以及可能与特定位置（position9ew）相关的代码或配置。...
event对象 （获取鼠标位置）
梁什么鸭“的博客
05-09 798
event对象： 用来获取事件的详细信息：鼠标位置、键盘按键 火狐、低版本的chrome不兼容 解决：var oEvent = ev || event; 举个栗子1：不管鼠标点击哪里，都会有反应 你可能会想到直接给body设置点击事件，运行后发现没反应 原因： body的height是由里面的内容撑开的，当里面为空时，body高度为0，此时点击页面自然没反应。 解决：给document设置点击事件，document代表的是整个网页 这里做个延伸: document 的child...
JavaScript中获取鼠标位置相关属性总结
12-11
javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove，就可以实时获得鼠标位置。 但是！！event中和鼠标相关的属性太多了，很让人头大！如下： event.layerX event.layerY event.clientX event.clientY event.pageX event.pageY event.offsetX event.offsetY event.screenX event.screenY event.x event.y 共计6组！ 而且他们的区别并不明显，各浏览器间
JavaScript获取鼠标位置的三种方法
we
05-17 9905
在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果，这篇文章就鼠标点击位置坐标获取做一些简单的总结。 获取鼠标位置首先要了解什么是event，event是一个声明了全局变量的一个对象，在chrome和IE下，可以随意访问，对于好奇的朋友console.log一下event。但！！！Firefox下是没有event这个对象的！！ 好消息的是：在IE8，chrome下，是有event这个对象的！ 鼠标点击位置坐标
鼠标Event位置 视窗位置
amuist_ting的博客
09-15 160
鼠标Event位置 鼠标事件event对象 clientX 以浏览器左上顶角为原点，定位 x 轴坐标 clientY 以浏览器左上顶角为原点，定位ｙ轴坐标 offsetX 以当前事件的目标对象content左上角为原点，定位x轴坐标 offsetY 以当前事件的目标对象content左上角为原点，定位y轴坐标 pageX 以Document 对象（即文本窗口）左上角为原点，定位x轴坐标 pageY 以Document 对象（即文本窗口）左上角为原点.
如何取鼠标的当前位置/坐标
guoguo1980的专栏
01-17 2874
一般在Javascript中，我们用event.clientX来取当前鼠标在文档中的坐标，用event.ScreenX来去当前鼠标在屏幕中的坐标。但是，在Mozilla系列浏览器中，直接使用event是不行的，会提示说event没有定义，因此在Mozilla或Firefox中调用时，需要变通一下。在调用函数的时候，始终传一个event参数进去，在Mozilla中，会将Event对象传进去，而在
event距相对父容器的位置
wangxiuyan0228的博客
06-15 1374
function getOffsetX(event){ var evt =event||window.event; var srcObj = evt.target || evt.srcElement; if (evt.offsetX){ return evt.offsetX; }else{ var rect = srcOb...
java获取鼠标事件,event事件之鼠标位置获取
weixin_39994665的博客
03-09 442
screenX与screenY坐标原点从电脑或者手机屏幕左上角为0点。pageX与pageY概述：它们是事件对象属性，主要作用也是获取鼠标位置。是网页主题部分左上角为0点clientX与clinetY概述：主要作用，获取鼠标位置，是网页可视区部分左上角为0点。offsetX与offsetY概述：他们两者也是事件对象属性，他们主要作用也是获取鼠标位置，类似于pageX与pageY，但是这个获取数据0...
javascript之event的属性获取鼠标的位置
persistsss的博客
04-14 471
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <style> *{ margin:0; padding:0; } body{ height:10000px; ...
获取鼠标的各种位置(OffsetXY, screenXY,clientXY,pageXY)+js操作案例
preserveXing的博客
03-04 572
根据鼠标事件 在event中获得鼠标的位置坐标 有个案例 可以粘贴复制下来 打开后就是上面的内容 仔细看数据就明白了 床用的有以下几种 屏幕距离 let screenX=e.screenX let screenY=e.screenY body窗口 let clientX=e.clientX let clientY=e.clientY 目标元素 let offsetX=e
js获取鼠标坐标的方法
热门推荐
weixin_45817492的博客
04-01 1万+
js获取鼠标坐标的方法
QT编程进阶：深入理解事件机制
"QT编程进阶 - 深入理解事件机制" 在Qt编程中，事件机制是核心组件之一，它使得用户界面能够对各种用户...在实际编程中，熟练运用事件处理函数（如event()、eventFilter()等）和自定义事件可以实现复杂的应用逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值