下载文档原格式
js与jquery中获取当前⿏标的x、y坐标位置的代码复制代码代码如下:<div id="testDiv">放在我上⾯</div><script type="text/javascript">$('#testDiv').mousemove(function(e) {var xx = e.originalEvent.x || yerX || 0;var yy = e.originalEvent.y || yerY || 0;$(this).text(xx + '---' + yy);});</script>⿏标滑动显⽰⿏标的当前位置坐标，主要是onmousemove函数。
复制代码代码如下:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>javascript获得⿏标位置</title></head><body><script>function mouseMove(ev){Ev= ev || window.event;var mousePos = mouseCoords(ev);document.getElementById("xxx").value = mousePos.x;document.getElementById("yyy").value = mousePos.y;}function mouseCoords(ev){if(ev.pageX || ev.pageY){return {x:ev.pageX, y:ev.pageY};}return{x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};}document.onmousemove = mouseMove;</script>⿏标X轴:<input id=xxx type=text>⿏标Y轴:<input id=yyy type=text></body>。
JavaScript 获取鼠标点击位置坐标在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8，FireFox，Chrome下进行测试兼容鼠标点击位置坐标相对于屏幕如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距，不考虑iframe因素，不同浏览器下表现的还算一致。
function getMousePos(event) {var e = event || window.event;return {'x':e.screenX,'y':screenY}}相对浏览器窗口简单代码即可实现，然而这是还不够，因为绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标，event的clientX，clientY属性分别表示鼠标点击位置相对于文档的左边距，上边距。
于是类似的我们写出了这样的代码function getMousePos(event) {var e = event || window.event;return {'x':e.clientX,'y':clientY}}相对文档简单测试也没什么问题，但是clientX与clientY获取的是相对于当前屏幕的坐标，忽略页面滚动因素，这在很多条件下很有用，但当我们需要考虑页面滚动，也就是相对于文档（body 元素）的坐标时怎么办呢？加上滚动的位移就可以了，下边我们试试怎么计算页面滚动的位移。
其实在Firefox下问题会简单很多，因为Firefox支持属性pageX,与pageY属性，这两个属性已经把页面滚动计算在内了。
在Chrome可以通过document.body.scrollLeft，document.body.scrollTop计算出页面滚动位移，而在IE下可以通过document.documentElement.scrollLeft ，document.documentElement.scrollTopfunction getMousePos(event) {var e = event || window.event;var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;var scrollY = document.documentElement.scrollTop || document.body.scrollTop;var x = e.pageX || e.clientX + scrollX;var y = e.pageY || e.clientY + scrollY;//alert('x: ' + x + '\ny: ' + y);return { 'x': x, 'y': y };}getBoundingClientRect() 来获取页面元素的位置document.documentElement.getBoundingClientRect下面这是MSDN的解释：SyntaxoRect = object.getBoundingClientRect()Return ValueReturns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.RemarksThis method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.还是实际解释下，该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
JavaScript中获取⿏标位置相关属性总结javascript并没有mouse对象，获取⿏标坐标要靠强⼤的event对象。
我们通过监听document的mousemove，就可以实时获得⿏标位置。
但是！！event中和⿏标相关的属性太多了，很让⼈头⼤！如下：yerX yerYevent.clientX event.clientYevent.pageX event.pageYevent.offsetX event.offsetYevent.screenX event.screenYevent.x event.y共计6组！⽽且他们的区别并不明显，各浏览器间还不兼容！这篇⽂章的⽬的就是搞清楚他们的区别，以及选出那些不推荐使⽤的。
测试代码直接运⾏下列代码：复制代码代码如下:<!DOCTYPE html><br /><html xmlns="/1999/xhtml"><br /><head><br /><meta charset="utf-8" /></p><style>body {position:relative;}div {min-height: 300px; background-color: #eee;}#jg {right: 0; top: 10px; position: fixed; background-color: #f00;}</style><p></head><br /><body><br /><span id="jg">显⽰结果</span><br /><input type="button" value="⼀个按钮" /></p><div>屏内div</div><div style="height:1000px; width:2000px; background:#ddd;">很⾼很宽。
获取光标坐标的方法1. 嘿，你知道通过浏览器的开发者工具能获取光标坐标吗？就像有个神奇的小助手在那，随时告诉你光标在页面的哪个位置。
比如你在玩一个网页游戏，想知道自己点击的准确位置，这方法不就派上用场啦！2. 哇哦，用 JavaScript 监听鼠标事件也能获取到光标坐标呢！这就好比你的电脑有了一双敏锐的眼睛，时刻盯着光标的一举一动。
比如说你在设计一个网页，想要根据光标的位置来做出一些动态效果，这可太重要啦！3. 嘿呀，利用一些专门的插件或库也不是不行呀！这就好像给你的电脑安装了特别的工具，能精准地抓住光标坐标。
就好像你在制图的时候，能通过这个准确地定位要操作的地方呢！4. 你晓得不，在某些图形编辑软件里也是可以获取光标坐标的哟！这就跟你在画画时有个小坐标指示器一样。
好比你画一幅精美的画，要精确地知道每一笔下去的位置呀！5. 唷，一些编程框架中也藏着获取光标坐标的办法呢！就如同框架里藏着小秘密等待你去发现。
比如说要做一个交互性很强的应用，没有这个怎么行呢！6. 哈哈，没想到吧，有些操作系统自身也提供了获取光标坐标的途径呢！简直就像是系统自带的小福利。
比如你在操作电脑时想快速知道光标在哪儿，多方便呀！7. 哎呀呀，通过特定的编程语言的函数也能做到呢！这不就是编程世界里的奇妙魔法嘛。
就好比你用魔法去探寻光标的位置呢！8. 哇塞，专业的图形处理软件通常都有获取光标坐标的功能呢！这就好比是专业选手的法宝。
例如你在进行精细的设计工作时可少不了它呀！9. 嘿嘿，其实还有好多其他不太常见的方法能获取光标坐标呢！这就是一个充满惊喜的领域。
不管怎样，掌握多种方法总不会错嘛！我的观点结论就是：获取光标坐标的方法多种多样，根据自己的需求和场景选择合适的方法就好啦，总有一个能满足你的！。
通过JS获取MousePosition（鼠标坐标）的代码function mouseX(evt){if(evt.pageX)return evt.pageX;else if(evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?document.documentElement.scrollLeft :document.body.scrollLeft);else return null;}function mouseY(evt){if(evt.pageY)return evt.pageY;else if(evt.clientY)return evt.clientY + (document.documentElement.scrollT op ?document.documentElement.scrollT op :document.body.scrollTop);else return null;}Mouse Cursor PositionJoin the DiscussionQuestions? Comments?Until recently there was no standard way of determining the position of the mouse cursor within the browser. The W3C standards say that the current mouse cursor position within the browser window when an event is triggered should be given by event.clientX and event.clientY to obtain the distance from the left and top of the browser window respectively.I have tested this in a number of different browsers and have found that Internet Explorer 6, Netscape 6+, Firefox, and Opera 7+ all produce correct values for the mouse coordinates relativeto the browser window in these fields. To obtain the position within the web page you would simply add the scroll position of the page within the browser window.Opera 5 and 6 produced values for these fields but the values are relative to the top of the web page instead of relative to the browser window and so adding the scroll position would produce a wrong result with these browsers. Netscape 4 doesn't understand these fields at all and so would give an error if this code were used by itself.One added complication is that Internet Explorer uses two different ways to determine the scroll position of the page. It uses document.body.scrollLeft and document.body.scrollTop in versions before version 6 as well as in version 6 when there is no DOCTYPE declared or a transitional DOCTYPE is declared. When IE6 is declared using a strict DOCTYPE document.documentElement.scrollLeft and document.documentElenent.scrollT op are used instead. Other browsers either use one of these values or pageXOffset and pageYOffset.Although not part of the W3C standards there is another pair of fields that will give the position of the mouse cursor that is useful. With the exception of Internet Explorer and Opera 5 and 6, all of the browsers I have mentioned also support event.pageX and event.pageY which give the mouse cursor position relative to the top left corner of the web page itself. Using these fields you do not have to add the scroll position of the page.By combining tests for both of these methods together we can create code to locate the mouse cursor position that will work on Internet Explorer, Netscape 4+, Firefox, and Opera 7+. You just need to pass the event to the following functions toretrieve the appropriate position on the web page.function mouseX(evt) {if (evt.pageX) return evt.pageX;else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?document.documentElement.scrollLeft :document.body.scrollLeft);else return null;}function mouseY(evt) {if (evt.pageY) return evt.pageY;else if (evt.clientY)return evt.clientY + (document.documentElement.scrollT op ?document.documentElement.scrollT op :document.body.scrollTop);else return null;}There are a couple of other pairs of fields that give mouse cursor positions that are less useful. The fields event.screenX and event.screenY are defined in all of the browsers I tested. They give the position of the mouse cursor relative to the top left corner of the screen. Without knowing the position of the top left corner of the browser window this information is not very useful with respect to being able to interact with the web page.The fields event.x and event.y also exist in Netscape 4, Internet Explorer, and Opera 7+. In Netscape 4 these fields give the position within the web page exactly the same as the pageX and pageY fields. In Internet Explorer and Opera 8 they give the position of the mouse cursor within the current object (if that object is positioned absolute, relative, or fixed) or within the page(for static objects). Opera 7 appears to use these fields to give the position of the mouse cursor relative to the bottom left corner of the screen.还要其他的情况：调用方法:复制代码代码如下:var pos=GetObjPos(ID);function CPos(x, y){this.x = x;this.y = y;}//获取控件的位置function GetObjPos(ATarget){var target = ATarget;var pos = new CPos(target.offsetLeft, target.offsetTop);var target = target.offsetParent;while (target){pos.x += target.offsetLeft;pos.y += target.offsetTop;target = target.offsetParent}return pos;}下面是我自己开发项目中的实例：复制代码代码如下:<script type="text/jscript" language="jscript" >function showPopup(obj,evt) {var strDate = $(obj).attr('dateTime');var strUserName = $(obj).attr('userName');var id = "event_" + strDate.replace(/-/g, '');var box = $('#'+id);if (box.length == 0) {$(document.body).append("<div id='" + id + "' class='popupinfo'></div>");box = $('#' + id);box.css("position", "absolute");box.css("display", "block");box.css("z-index", "100");box.append('<input id="File1" type="image" src="../Images/Onload.gif"/>');Microsoft.PMWeb.WebSite.SiteService.GetEventInfoByDate( strUserName + "#" + strDate, onSuccess, onFailed, "1111");}else {var imgLoad = box.find(":image");imgLoad.css("display", "none");}var objQueryPosition = GetObjPos(obj);box.css("left", mousePos.x);box.css("top", mousePos.y);box.css("display", "");function onSuccess(result, context, methodName) {var imgLoad = box.find(":image");imgLoad.css("display","none");box.append(result);}function onFailed(error, context, methodName) {var errorMessage = error.get_message();alert("Review Failed:" + errorMessage);}}function hidePopup(obj) {var strDate = $(obj).attr('dateTime');var strUserName = $(obj).attr('userName');var id = "event_" + strDate.replace(/-/g, '');var box = $('#'+id);if (box.length != 0) {$('#'+id).css("display", "none");}}var mousePos;function mouseMove(ev) {ev = ev || window.event;mousePos = mouseCoords(ev);}function mouseCoords(ev) {if (ev.pageX || ev.pageY) {return { x: ev.pageX, y: ev.pageY };}return {x: ev.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft :document.body.scrollLeft),y: ev.clientY + (document.documentElement.scrollT op ? document.documentElement.scrollT op : document.body.scrollTop)};}document.onmousemove = mouseMove;</script>。
一、获得的坐标值相对于body时<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>获得鼠标的坐标值----当需求为获得的坐标值相对于body时</title> </head><body><div style=" width:500px; margin:100px auto;"><p id="x"></p><p id="y"></p></div><script type="text/javascript">var x , y;//当需求为获得的坐标值相对于body时，用：function positionBody(event){event = event||window.event;//获得相对于body定位的横标值；x=event.clientX//获得相对于body定位的纵标值；y=event.clientY}//应用：document.onmousemove = function(event){positionBody(event);document.getElementById("x").innerHTML = "x= " + x + "px";document.getElementById("y").innerHTML = "y= " + y + "px";}</script></body></html>二、获取指导区域鼠标点击位置坐标<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>获得鼠标的坐标值----当需求为获得的坐标值相对于某一对象时</title><style type="text/css">*{ padding:0; margin:0;}#objId { width:500px; height:500px; margin:auto; background:#000; line-height:500px; text-align:center; color:#fff;}</style></head><body><div style=" width:500px; margin:auto; height:50px; "><p id="x"></p><p id="y"></p></div><div id="objId">ID名为objId的对象</div><script type="text/javascript">var x,y;//当需求为获得的坐标值相对于某一对象时，用：function positionObj(event,id){//获得对象相对于页面的横坐标值；id为对象的idvar thisX = document.getElementById(id).offsetLeft;//获得对象相对于页面的横坐标值；var thisY = document.getElementById(id).offsetTop;//获得页面滚动的距离；//注：document.documentElement.scrollTop为支持非谷歌内核；document.body.scrollTop 为谷歌内核var thisScrollTop = document.documentElement.scrollTop + document.body.scrollTop;event = event||window.event;//获得相对于对象定位的横标值= 鼠标当前相对页面的横坐标值- 对象横坐标值；x = event.clientX - thisX;//获得相对于对象定位的纵标值= 鼠标当前相对页面的纵坐标值- 对象纵坐标值- 滚动条滚动的高度；y = event.clientY - thisY + thisScrollTop;}//应用：document.getElementById("objId").onmousemove = function(event){ positionObj(event,"objId");document.getElementById("x").innerHTML = "x= " + x + "px";document.getElementById("y").innerHTML = "y= " + y + "px";}//清空设置document.getElementById("objId").onmouseout = function(event){ document.getElementById("x").innerHTML = "";document.getElementById("y").innerHTML = "";}</script></body></html>。
前端获取鼠标位置的方法(一)
前端获取鼠标位置
1. 通过原生JavaScript获取鼠标位置
•使用和属性来获取相对于窗口的鼠标位置
•优点：简单易懂，适用于所有主流浏览器
•缺点：不适用于移动设备
2. 使用jQuery获取鼠标位置
•使用和属性来获取相对于文档的鼠标位置
•优点：兼容性好，适用于移动设备和主流浏览器
•缺点：需要引入jQuery库
3. 使用CSS选择器获取鼠标位置
•使用:hover伪类选择器和CSS变量来获取鼠标位置
•优点：无需编写JavaScript代码，简洁易懂
•缺点：仅适用于元素上方发生hover事件的情况，不适用于所有场景
4. 使用获取鼠标位置
•使用的事件修饰符@mousemove和计算属性来获取鼠标位置
•优点：结合了的响应式数据和事件处理机制，适用于项目
•缺点：需要在项目中使用，不适用于非项目
5. 使用React获取鼠标位置
•使用React的事件处理函数和状态来获取鼠标位置
•优点：结合了React的组件化和状态管理能力，适用于React项目
•缺点：需要在React项目中使用，不适用于非React项目
总结
以上是几种常用的方法来获取前端鼠标位置，每种方法都有自己
的优缺点和适用场景。
根据实际需求选择合适的方法来获取鼠标位置，以便更好地开发前端应用。
注意：为了遵守文章内容规则，本文未展示相关代码和示例，请在实际项目中参考相关文档和教程进行实践。
获取鼠标坐标指针的方法我折腾了好久获取鼠标坐标指针的方法，总算找到点门道。
说实话，一开始我真是瞎摸索。
我就知道电脑上有鼠标指针，但是咋知道它的坐标呢？我先试了个最笨的办法，我就在屏幕上想象有一个大的坐标系，原点在左上角，然后我就拿着尺子去量鼠标指针离左边和上边的距离，你能想象那有多蠢吗？而且根本不准确啊，稍微动一下鼠标，差好多呢。
后来我就想到，软件肯定有办法获取呀。
我用的是Windows系统，我就开始在系统设置里面找。
找了好久，都没发现有专门显示鼠标坐标的地方，我就在那设置的菜单里面各种点点点，翻了半天，后来才恍然大悟，系统设置里根本就没有直接显示这个的功能呢，算是白忙活一场，这也是个教训，别以为啥功能都在系统设置里能找到。
接着我就想那编程能不能解决呢？我就开始研究起了Python这门编程语言。
我先在网上找资料，看到有人说可以用PyAutoGUI这个库。
我就去安装这个库，结果安装的时候就出了一堆问题，不是版本不对就是缺少依赖项。
解决了安装的问题后，我就按照教程写了几行代码。
就像盖房子一样，一块砖一块砖地垒起来。
代码大概就是先导入这个库，然后调用它的函数来获取鼠标的坐标。
我当时写的时候心里还直打鼓，不确定这到底行不行。
结果一运行，嘿，还真把鼠标的坐标给显示出来了。
那一刻真是觉得好有成就感啊。
不过这个方法对于那些不想编程或者不懂编程的人来说就有点难了。
我又听说有些软件专门显示鼠标坐标的。
我就去网上下载了几款，有些软件好用，有些就很坑。
好用的那些打开就能直接看到鼠标坐标的实时变化。
那些坑的呢，不是有好多广告弹出，就是根本不准或者界面特别难懂。
如果要获取鼠标坐标指针，你像我要是编程有基础的话，用Python 加PyAutoGUI就挺好。
要是不想编程，那就多在网上搜搜那种靠谱的专门显示坐标的小软件，不过下的时候一定要小心那些垃圾软件哦。
还有就是别像我一开始那样，光在系统设置里死找，没那功能的。
这就是我关于获取鼠标坐标指针的一些经验了。
Javascript获取⿏标当前的位置实现⽅法有时候，我们需要得到窗⼝拖动或者⿏标移动的距离，此时可以通过计算⿏标前后在页⾯中的位置来得到想要的结果，下⾯介绍⼏个事件属性:1、客户区坐标位置 ⿏标事件都是在浏览器视⼝中的特定位置上发⽣的。
这个位置信息保存在事件对象的 clientX 和 clientY 属性中。
它们的值表⽰事件发⽣时⿏标指针在视⼝中的⽔平和垂直坐标（不包括页⾯滚动的距离）。
如下图所⽰：var div = document.getElementById("myDiv"); //获取元素EventUtil.on(div, "click", function(event){event = EventUtil.getEvent(event);alert("Screen coordinates: " + event.screenX + "," + event.screenY);});注：其中，EventUtil.on()表⽰为元素绑定事件，EventUtil.getEvent(event)表⽰获取事件对象。
EventUtil是⾃定义的事件对象（使⽤JavaScript实现），⾥⾯包含了⼀些跨浏览器的⽅法，具体实现，请看另⼀篇⽂章《》。
如果项⽬使⽤了jQuery插件，可相应的替换成对应的⽅法。
2、页⾯坐标位置 事件对象属性pageX 和pageY，能告诉你事件是在页⾯中的什么位置发⽣的。
换句话说，这两个属性表⽰⿏标光标在页⾯中的位置（相当于⿏标在窗⼝中的位置坐标 + 页⾯滚动的距离）。
var div = document.getElementById("myDiv");//获取id为"myDiv"的元素EventUtil.on(div, "click", function(event){//为元素绑定click事件event = EventUtil.getEvent(event);//获取event事件对象var pageX = event.pageX,pageY = event.pageY;if (pageX === undefined){//IE8及更早版本pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);}if (pageY === undefined){pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);}alert("Page coordinates: " + pageX + "," + pageY);});3、屏幕坐标位置 通过screenX 和screenY 属性就可以确定⿏标事件发⽣时⿏标指针相对于整个屏幕的坐标信息。
Jquery 获取鼠标位置坐标
//同样，文章也是转载的，也不知道下面两个函数是什么来的。
晕~
var divoffset = 10; //显示层离鼠标的距离
$(document).ready(function(){
var tooltip = $("#tooltip");//获取显示层
var toolContent = $("#toolContent");//获取显示内容层
$('#thumbs > li').bind('mouseover',function(e){//查找a对象，并给对象创建onmouseover事件--这里可以替换成其他的如：div($('div').bind())，ul下的li $('ul > li').bind()
Mouse(e);//计算显示层的位置
toolContent.html("<li>显示内容</li>");//显示内容--PS:自己改成动态获取
tooltip.css({ top: toppos ,left: leftpos });//给显示层定义CSS--当前计算出的位置
tooltip.stopAll().pause(300).fadeTo(200,1);//显示效果
}).bind('mousemove',function(e){//给对象创建mousemove事件
Mouse(e);//计算显示层的位置
tooltip.css({ top: toppos ,left: leftpos });//给显示层定义CSS--当前计算出的位置--随时改变位置
}).bind('mouseout',function(){//给对象创建mouseout事件
tooltip.stopAll().fadeTo(500,0, function(){$(this).hide();});//隐藏效果
});
});
//计算坐标函数
var Mouse = function(e){
mouse = new MouseEvent(e);
leftpos = mouse.x + divoffset;
toppos = mouse.y + divoffset;
}
//获取鼠标坐标函数
var MouseEvent = function(e) {
this.x = e.pageX
this.y = e.pageY
}。
