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

最新推荐文章于 2023-02-27 22:43:58 发布
最新推荐文章于 2023-02-27 22:43:58 发布
阅读量860 收藏
点赞数 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及以下
陶龙
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
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组！ 而且他们的区别并不明显，各浏览器间
event.X和event.clientX的区别分析
09-05
解释一下event.X和event.clientX有什么区别？event.clientX返回事件发生时,mouse相对于客户窗口的X坐标 event.X也一样但是如果设置事件对象的定位属性值为relative
event.x,event.clientX,event.offsetX区别
01-19
x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。 clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。 offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] <html> <head> </head> [removed] function reload(){ [removed].reload(“//www.jb51.net”); } [removed] <body> <table> <TR><TD><input type=”button” name=”bu
鼠标事件MouseEvent对象的一些坐标属性总结
小赛赛爱吃肉
01-09 3534
MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown 等
图解鼠标事件的 ScreenX ，LayerX，clientX，PageX，offsetX，X
fang_my的博客
02-27 1350
这篇文章是由我随手做的笔记改编而来，笔记内容比较粗糙，转化为文章后个人感觉又重新复习了一遍，加深了很大的印象。如果该文章能帮助到一些人，也是一件幸事。可能我以后也会经常来翻阅自己的这篇文章～这几个属性确实容易搞混🤔。
【javaScript】Event对象点击位置的四大方法clientX/clientY--screenX/screenY--offsetX/offsetY--pageX/pageY
Umbrella_Um的博客
07-25 677
JS中Event对象点击位置的四大方法 前言总结： clientX/clientY(指当前对象点击的位置相对于当前浏览器窗口左上角的距离,这个属性受滚动条的影响–相对位置)； screenX/screenY(指当前对象点击的位置相对于电脑屏幕左上角的绝对位置,注意是屏幕,而不是浏览器窗口–绝对位置)； offsetX/offsetY(指当前对象点击的位置绝对于当前位置左上角的位置,该左上角是bo...
pageX，pageY，screenX，screenY，clientX，和clientY，offsetX ，offsetY，layerX，layerY的使用 和 区别
IT技术宅-北方的刀郎
01-25 2069
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 7575
一.PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移而变化. 二.screenX screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议 三.offsetX和layerX offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有bode
常见的鼠标事件
hongchen_lian的博客
01-09 2230
常见的鼠标事件 click：单击事件 dblclick：双击事件 mousedown：按下鼠标键时触发 mouseup：释放按下的鼠标键时触发 mousemove：鼠标移动事件 mouseover：移入事件 mouseout：移出事件 mouseenter：移入事件 mouseleave：移出事件 contextmenu：右键事件 mouseover事件和mouseenter事件，都是鼠标进入一个...
Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）
麻瓜哇哇哇的博客
05-09 1435
简介 因为实际开发中，很少用到event对象的这几个值，每当写的时候又记不清，然后就要浪费时间去查找准确的资料，很是不爽，所以就做个记录~话不多说，直接上图（ps:图是网上找的，如果侵权，立马删除）： 针对offsetX, clientX, pageX, screenX，图上已经标的很明白了，就不做讲解了~ event.x event.x代表点击的点距离可视区左边框的距离，而它在不同浏览器处理结果是不一样的，首先看以下代码 <body> <div> 外
javascript坐标：event.x、event.clientX、event.offsetX、event.screenX 用法
weixin_30628801的博客
04-19 2493
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 screen...
event对象 （获取鼠标位置）
梁什么鸭“的博客
05-09 751
event对象： 用来获取事件的详细信息：鼠标位置、键盘按键 火狐、低版本的chrome不兼容 解决：var oEvent = ev || event; 举个栗子1：不管鼠标点击哪里，都会有反应 你可能会想到直接给body设置点击事件，运行后发现没反应 原因： body的height是由里面的内容撑开的，当里面为空时，body高度为0，此时点击页面自然没反应。 解决：给document设置点击事件，document代表的是整个网页 这里做个延伸: document 的child...
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 499
pointer-event属性详解
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
热门推荐
lzding的博客
05-02 5万+
通过 2 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持：
JavaScript中鼠标按住移动、
最新发布
07-12
你可以使用JavaScript来实现鼠标按住移动的效果。以下是一个简单的示例代码： ```javascript // 获取需要移动的元素 var element = document.getElementById('your-element'); // 记录鼠标按下时的初始位置 var initialX; var initialY; // 监听鼠标按下事件 element.addEventListener('mousedown', function(event) { // 记录鼠标按下时的初始位置 initialX = event.clientX; initialY = event.clientY; // 监听鼠标移动事件 document.addEventListener('mousemove', moveElement); }); // 监听鼠标松开事件 document.addEventListener('mouseup', function() { // 停止监听鼠标移动事件 document.removeEventListener('mousemove', moveElement); }); // 移动元素的函数 function moveElement(event) { // 计算鼠标移动的距离 var deltaX = event.clientX - initialX; var deltaY = event.clientY - initialY; // 更新元素的位置 element.style.left = element.offsetLeft + deltaX + 'px'; element.style.top = element.offsetTop + deltaY + 'px'; // 更新初始位置 initialX = event.clientX; initialY = event.clientY; } ``` 在上述代码中，首先获取需要移动的元素，并监听鼠标按下事件。在鼠标按下事件处理函数中，记录鼠标按下时的初始位置，并添加监听鼠标移动事件的处理函数。在鼠标移动事件处理函数中，计算鼠标移动的距离，并更新元素的位置。当鼠标松开时，停止监听鼠标移动事件。 你可以将上述代码放在页面的 `<script>` 标签中，并将需要移动的元素的 id 替换为你自己的元素 id。这样，当你按住鼠标移动时，该元素就会跟随鼠标移动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值