javascript事件坐标

最新推荐文章于 2024-11-13 01:18:00 发布
最新推荐文章于 2024-11-13 01:18:00 发布
阅读量83 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/dubaokun/p/3430895.html
版权

clientX 鼠标在页面显示区域的坐标

screenX鼠标在显示屏幕上的坐标

layerX 鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了position的父元素”的边界的位置，从border的左上角开始定位，即如果这个父元素存在border，则坐标原点在border的左上角，而不是内容区域的左上角

 

offsetX 鼠标相对于“触发事件的元素”的位置，从内容区域左上角开始定位，不是从border左上角开始！这个属性比较好用，用来判断鼠标点在一个元素中的哪个位置很方便

pageX 鼠标在页面上的位置，从页面左上角开始定位，这个可以很方便在整个页面上进行定位

 

 

x 跟layerX一个效果，可作为layerX的直接替换属性

 

offsetLeft:这个属性不是事件对象的属性，而是DOM对象所有的，该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的，设置了position的父对象”中的位置

转载于:https://www.cnblogs.com/dubaokun/p/3430895.html

weixin_34228662
关注
javascript 事件对象 坐标事件说明
10-29
JavaScript 事件对象是处理用户交互时不可或缺的一部分，它们提供了有关事件发生时的各种信息，包括坐标信息。在不同的浏览器中，事件对象的坐标属性略有不同，这可能会导致在跨浏览器开发时遇到兼容性问题。下面...
JavaScript 事件对象的实现
10-29
综上所述，JavaScript事件对象的实现是基于构造函数、原型、this关键字以及函数的高阶特性构建的。这种实现方式使得在JavaScript中可以灵活地实现面向对象的编程，并且让开发者有能力根据应用需求创建自定义事件和...
JavaScript-事件坐标
weixin_33982670的博客
01-03 87
1 事件坐标: 2 1.参照屏幕左上角e.screenX,e.screenY 3 2.参照文档显示区左上角:e.clientX||e.x , e.clientY||e.y 4 3.参照所在父元素的左上角:e.offsetX , e.offsetY 转载于:https://www.cnblogs.com/longly/p/6244086.html...
事件坐标
weixin_33908217的博客
01-31 191
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 eve...
事件对象中的坐标位置
yr123456654321的博客
04-26 246
Event对象的五种坐标
10-07 372
js中Event对象的5种坐标
DreamFJ的博客
08-09 1339
1.clientX/clientY——相对于浏览器可视区左上角(0,0)的坐标 2.screenX/screenY——相对于设备屏幕左上角(0,0)的坐标 3.offsetX/offsetY——相对于事件源左上角(0,0)的坐标，例如点击一个div，则该div就是事件源 4.pageX/pageY——相对于整个网页左上角(0,0)的坐标 5.X/Y——本来是IE的属性，相对于用css动态定...
JavaScript 事件对象介绍
10-24
事件对象主要用于提供事件的上下文信息，允许开发者在事件处理函数中获取事件相关的详细信息，如事件类型、触发事件的元素、事件坐标等。在处理诸如鼠标点击、键盘按键等事件时，事件对象显得尤为关键。 当用户与...
screen,client,page三种确定鼠标坐标的区别和原生JS事件写法，区别于Jquery的$.on(x,y);和$.click()...
weixin_30670151的博客
07-25 114
screenX clientX pageX的区别 screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 JS原生事件的写法 ① ...
js：事件对象中的7种坐标
彭世瑜的博客
11-18 2119
三大类： 相对于当前点击元素 相对于当前浏览器 相对于整个显示器 7种坐标 1、窗口坐标：clientX、clientY 相对于用户浏览器的左上角的xy坐标 也就是窗口坐标，不包括工具栏、滚动条 2、layerX、layerY 鼠标相对于目标元素最近的具有absolute/relative定位元素的位置，包含border 3、movementX、movementY 两个鼠标移动事件间隔中当中鼠标移动的相对坐标 4、offsetX、offsetY 相对你点击那个dom的左上角x、y坐标 5、文档坐标：pa
图解事件坐标screenX、clientX、pageX, offsetX的区别
热门推荐
越努力，越幸运！
11-30 1万+
一、图解 如图所示，假设页面中灰色圆点是鼠标点击处，黄色区域是鼠标触发事件对象 二、概念 1、screenX 和screenY 参照点：电脑屏幕左上角 screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量 screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量 2、clientX和clientY 参照点：浏览器内容区域左上角 clientX：鼠标点击位置相对...
JavaScript 获取鼠标点击位置坐标
weixin_34392435的博客
10-09 889
在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8，FireFox，Chrome下进行测试兼容   鼠标点击位置坐标 相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screen...
event事件坐标详解（clientx， offsetx， screenX等）
zlzbt
07-23 8470
鼠标事件（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..
事件对象坐标属性
weixin_43444623的博客
12-01 281
client 以可视区域的左上角为参考 page 以文档页面左上角为参考 screen鼠标离电脑屏幕的坐标 offset 以元素的左上角为参考
js中的事件对象event （获取元素的,x,y坐标）
qq_44983621的博客
05-23 8374
event的使用 获取元素的,x,y坐标 如图所示 当鼠标放在上面那个框上时获取其坐标，并且在下面框中显示 其实需要使用到鼠标移动事件 onmousemove event 事件对象中封装了当前事项相关的一切属性 如鼠标的坐标键盘的按键 <script type="text/javascript"> window.onload = function(){ var bi...
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
最新发布
zhzijun的博客
11-13 409
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 741
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
Vue中的常用指令
m0_62388400的博客
11-12 1128
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 152
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
JavaScript事件对象详解：坐标事件属性对比与应用
JavaScript事件对象中的坐标事件是开发者在处理鼠标、触摸和其他交互时至关重要的概念。这些坐标表示了事件发生时，鼠标指针或触点在页面上的位置，对于实现精准的用户界面响应至关重要。本文主要关注于不同浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值