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

最新推荐文章于 2022-10-24 15:15:15 发布
最新推荐文章于 2022-10-24 15:15:15 发布
阅读量218 收藏
点赞数
文章标签： javascript ViewUI

JavaScript中的event对象一共有六对鼠标位置的属性。分别如下：

属性对参考点浏览器兼容性
clientX，clientY 浏览器窗口所有

layerX，layerY

最近的绝对定位的父节点，如果没有，则为documentFirefox，Chrome，Safari
offsetX，offsetY事件目标对象所有，Firefox除外
pageX，pageYdocument对象所有，IE除外
ScreenX，ScreenY计算机屏幕所有
x,y尽量不要用它，兼容性差IE9及以下

iteye_12675
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中获取鼠标位置相关属性总结
12-11
在JavaScript中，获取鼠标位置是常见的交互操作，主要依赖于事件对象`event`。由于JavaScript并没有专门的`mouse`对象，所以我们需要通过监听`document`的`mousemove`事件来捕获鼠标的移动情况。在处理这些事件时，...
JavaScript取得鼠标绝对位置程序代码介绍
10-27
此外，`event.clientX` 和 `event.clientY` 表示的是相对于浏览器视口左上角的位置（不包含滚动距离），而`event.offsetX` 和 `event.offsetY`（IE）以及 `event.layerX` 和 `event.layerY`（Firefox）则是相对于...
【鼠标事件 MouseEvent】clientX clientY offsetX offsetX pageX screenX screenY
ColdCoder的博客
06-15 1303
鼠标事件 MouseEvent
研究MouseEvent中的clientX、offsetX、pageX、screenX
mtgr的博客
01-28 2588
    很多时候需要在鼠标点击的时候获取点击的坐标来处理一些逻辑，有时候clientX、offsetX、pageX用的也不清楚，特此做了一个实验来记录。 1.含义 clientX 提供应用程序客户区域内发生事件的水平坐标（与页面内的坐标相对） offsetX 鼠标指针在该事件与目标节点的填充边缘之间的X坐标中的偏移量 pageX 相对于整个文档的左边缘单击鼠标的X（水...
js鼠标事件
uaena的博客
03-29 220
clientX clientY 这两个属性标记的是鼠标位于视口中的位置（x, y等价） 视口：以浏览器显示区域的左上角开始 offsetX、offsetY：这两个属性标记的是鼠标位于元素内部的位置（从padding开始计算），会受到子元素的影响 目标元素的左上角坐标（e.target） pageX pageY：这两个属性标记的是鼠标位于页面中的距离（layerX layerY等价） 默认情况下，当打开页面的时候处于首屏，所以这两个属性和clientX与clientY是相同的，当页面出现滚动条的...
非常有用的pointer-events属性
10-09 1496
pointer-events是css3的一个属性，指定在什么情况下元素可以成为鼠标事件的target（包括鼠标的样式）
【javaScript】Event对象点击位置的四大方法clientX/clientY--screenX/screenY--offsetX/offsetY--pageX/pageY
Umbrella_Um的博客
07-25 753
JS中Event对象点击位置的四大方法 前言总结： clientX/clientY(指当前对象点击的位置相对于当前浏览器窗口左上角的距离,这个属性受滚动条的影响–相对位置)； screenX/screenY(指当前对象点击的位置相对于电脑屏幕左上角的绝对位置,注意是屏幕,而不是浏览器窗口–绝对位置)； offsetX/offsetY(指当前对象点击的位置绝对于当前位置左上角的位置,该左上角是bo...
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
12-09
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将深入探讨这些属性的含义、用途及其在不同浏览器中的差异。 1. ...
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
10-19
2. `event.layerX` 和 `event.layerY` 或 `event.offsetX` 和 `event.offsetY`：这些属性提供鼠标相对于触发事件的元素（而不是整个窗口）的X和Y坐标。在某些浏览器中，`event.layerX` 和 `event.layerY` 不可用，...
Event对象、MouseEvent对象、inputEvent对象和focusEvent对象
哪有那么可爱的小蝈蝈的博客
10-20 1721
Event对象、MouseEvent对象、inputEvent对象和focusEvent对象 Event事件 change事件：多用于表单元素 1、用于文本框时，当输入内容被修改并且失去焦点时触发 2、select下拉菜单切换选项时触发，不用失去焦点，this.value就是下拉菜单的选项，仅限于下拉菜单，列表不可用 3、用select.selectedOptions就是选中的所有选项组成的列表 4、checked单选多选时也可以被激活 var values=Array.from(select.select
常见的鼠标事件
hongchen_lian的博客
01-09 2390
常见的鼠标事件 click：单击事件 dblclick：双击事件 mousedown：按下鼠标键时触发 mouseup：释放按下的鼠标键时触发 mousemove：鼠标移动事件 mouseover：移入事件 mouseout：移出事件 mouseenter：移入事件 mouseleave：移出事件 contextmenu：右键事件 mouseover事件和mouseenter事件，都是鼠标进入一个...
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...
pointer-event属性详解
小太阳的博客
10-24 576
pointer-event属性详解
说一下event.x,event.clientX,event.offsetX区别
小乐乐
02-09 590
x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。screenX:相对于用户屏幕。clientX,   clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0,   clientY=0；  offs...
React-Native中一些常见的问题
xjl271314的博客
05-21 2734
Android Studio编译错误transformClassesWithJarMergingForDebug 原因：缓存或者内部原因。 解决方法：清空缓存或者参考：[(https://github.com/HujiangTechnology/gradle_plugin_android_aspectjx/issues/2) 列表内容 ...
看完就懂的前端拖拽那些事
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
04-04 1792
前端拖拽入门与实践前言最近没有更新文章，因为去字节实习了一阵，实在是没有精力写东西，所以就咕咕咕了。现在回学校了，就可以继续更新啦，因为在字节做的业务和图可视化还有拖拽关系比较大，所以这次就写下拖拽相关的内容。HTML5 Drag and Drop 接口html5中提供了一系列Drag and Drop 接口，主要包括四部分：DragEvent，DataTansfer，D...
JS 获取DIV中鼠标相对位置的方法
11-25 7247
找了好久,终找到了一个好的方法,备忘!  JS获取DIV相对坐标 <!-- function getX(obj){ var parObj=obj; var left=obj.offsetLeft; while(parObj=parObj.offsetParent){ left+=parObj.offsetLeft; }
JavaScript基础—计算鼠标偏移量
csdn2479993071的博客
09-26 6435
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; }
JavaScript中鼠标按住移动、
最新发布
07-12
在鼠标按下事件处理函数中，记录鼠标按下时的初始位置，并添加监听鼠标移动事件的处理函数。在鼠标移动事件处理函数中，计算鼠标移动的距离，并更新元素的位置。当鼠标松开时，停止监听鼠标移动事件。 你可以将上述...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值