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

最新推荐文章于 2023-07-05 15:40:48 发布
最新推荐文章于 2023-07-05 15:40:48 发布
阅读量881 收藏
点赞数 1
分类专栏： js&html&css 文章标签： jquery
JavaScript中的event对象一共有六对鼠标位置的属性。分别如下：
属性对 参考点 浏览器兼容性
clientX，clientY 浏览器窗口 所有
layerX，layerY
最近的绝对定位的父节点，如果没有，则为document Firefox，Chrome，Safari
offsetX，offsetY 事件目标对象 所有，Firefox除外
pageX，pageY document对象 所有，IE除外
ScreenX，ScreenY 计算机屏幕 所有
x,y 尽量不要用它，兼容性差 IE9及以下
陶龙
关注
专栏目录
【鼠标事件 MouseEvent】clientX clientY offsetX offsetX pageX screenX screenY
ColdCoder的博客
06-15 1334
鼠标事件 MouseEvent
研究MouseEvent中的clientX、offsetX、pageX、screenX
mtgr的博客
01-28 2656
    很多时候需要在鼠标点击的时候获取点击的坐标来处理一些逻辑，有时候clientX、offsetX、pageX用的也不清楚，特此做了一个实验来记录。 1.含义 clientX 提供应用程序客户区域内发生事件的水平坐标（与页面内的坐标相对） offsetX 鼠标指针在该事件与目标节点的填充边缘之间的X坐标中的偏移量 pageX 相对于整个文档的左边缘单击鼠标的X（水...
js鼠标事件
uaena的博客
03-29 231
clientX clientY 这两个属性标记的是鼠标位于视口中的位置（x, y等价） 视口：以浏览器显示区域的左上角开始 offsetX、offsetY：这两个属性标记的是鼠标位于元素内部的位置（从padding开始计算），会受到子元素的影响 目标元素的左上角坐标（e.target） pageX pageY：这两个属性标记的是鼠标位于页面中的距离（layerX layerY等价） 默认情况下，当打开页面的时候处于首屏，所以这两个属性和clientX与clientY是相同的，当页面出现滚动条的...
Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）
麻瓜哇哇哇的博客
05-09 1549
简介 因为实际开发中，很少用到event对象的这几个值，每当写的时候又记不清，然后就要浪费时间去查找准确的资料，很是不爽，所以就做个记录~话不多说，直接上图（ps:图是网上找的，如果侵权，立马删除）： 针对offsetX, clientX, pageX, screenX，图上已经标的很明白了，就不做讲解了~ event.x event.x代表点击的点距离可视区左边框的距离，而它在不同浏览器处理结果是不一样的，首先看以下代码 <body> <div> 外
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
12-09
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将深入探讨这些属性的含义、用途及其在不同浏览器中的差异。 1. ...
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）则是相对于...
非常有用的pointer-events属性
10-09 1548
pointer-events是css3的一个属性，指定在什么情况下元素可以成为鼠标事件的target（包括鼠标的样式）
event对象 （获取鼠标位置）
梁什么鸭“的博客
05-09 831
event对象： 用来获取事件的详细信息：鼠标位置、键盘按键 火狐、低版本的chrome不兼容 解决：var oEvent = ev || event; 举个栗子1：不管鼠标点击哪里，都会有反应 你可能会想到直接给body设置点击事件，运行后发现没反应 原因： body的height是由里面的内容撑开的，当里面为空时，body高度为0，此时点击页面自然没反应。 解决：给document设置点击事件，document代表的是整个网页 这里做个延伸: document 的child...
JS中 PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
最新发布
qq_43631129的博客
07-05 7246
PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
Event对象、MouseEvent对象、inputEvent对象和focusEvent对象
哪有那么可爱的小蝈蝈的博客
10-20 1814
Event对象、MouseEvent对象、inputEvent对象和focusEvent对象 Event事件 change事件：多用于表单元素 1、用于文本框时，当输入内容被修改并且失去焦点时触发 2、select下拉菜单切换选项时触发，不用失去焦点，this.value就是下拉菜单的选项，仅限于下拉菜单，列表不可用 3、用select.selectedOptions就是选中的所有选项组成的列表 4、checked单选多选时也可以被激活 var values=Array.from(select.select
pageX，pageY，screenX，screenY，clientX，和clientY，offsetX ，offsetY，layerX，layerY的使用 和 区别
IT技术宅-北方的刀郎
01-25 2173
pageX，pageY，screenX，screenY，clientX，和clientY返回一个数，其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。 写了俩文件，放一个文件夹内测试看完就能明白， layerX_pageX_clientX_screenX_window_document_body.html： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
PageX、clientX、screenX、offsetX、layerX的区别
qq_45044074的博客
03-08 7733
一.PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移而变化. 二.screenX screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议 三.offsetX和layerX offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有bode
js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY
热门推荐
蒲公英芽的博客
01-06 2万+
MouseEvent的类别有以下： mousedown 鼠标按下 mouseup 鼠标释放 click 左键单击 dblclick 左键双击 mousemove 鼠标移动 mouseover 鼠标经过 mouseout 鼠标滑出 mouseenter 鼠标进入 mouseleave 鼠标离开 contextmenu 右键菜单 注意： 执行顺序：mousedown —&g...
JavaScript 事件Event的兼容写法。event属性(pageX,clientX)
houyanhua1的专栏
03-16 1400
event.html： //点击页面的任何部分 document.onclick = function (event) { //兼容写法 event = event || window.event; //兼容写法 console.log(e
js event鼠标坐标
weixin_44810547的博客
04-16 187
event鼠标坐标 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>event鼠标坐标</title> <style type="text/css"> *{margin: 0;padding: 0;} ...
js兼容问题，鼠标相对于事件源的位置，offsetX，layerX
u013342600的专栏
02-28 2206
前几天在工作中遇见一个问题。就是要判断鼠标点击后 相对于事件源（event.target）的位置。 当然可以用event.offsetX,event.offsetY,来获取到。 但是到了FF里面就挂了。 event.layerX 也不获取不到。 干脆就自己写了个方法， function getOffsetXY(evt) { if (evt.offsetX && evt.o
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值