Jquery 获取鼠标位置坐标
封面图
•
2025-10-30
•
jQuery
216
0
0
0
在 jQuery 中,你可以通过监听鼠标事件(如 `mousemove`)来获取鼠标的坐标。以下是几种常见的方法: --- ### ✅ 方法一:使用 `event.pageX` 和 `event.pageY` ```javascript $(document).on('mousemove', function(event) { var x = event.pageX; var y = event.pageY; console.log('X: ' + x + ', Y: ' + y); }); ``` - `pageX` 和 `pageY` 是相对于整个页面的坐标。 - 适用于大多数情况。 --- ### ✅ 方法二:使用 `event.clientX` 和 `event.clientY` ```javascript $(document).on('mousemove', function(event) { var x = event.clientX; var y = event.clientY; console.log('X: ' + x + ', Y: ' + y); }); ``` - `clientX` 和 `clientY` 是相对于浏览器视口(viewport)的坐标。 - 如果页面有滚动,它们不会自动调整,而 `pageX` 会。 --- ### ✅ 方法三:获取某个元素内的坐标 如果你只想获取某个特定元素内的鼠标位置,可以这样做: ```javascript $('#myElement').on('mousemove', function(event) { var offset = $(this).offset(); var x = event.pageX - offset.left; var y = event.pageY - offset.top; console.log('X inside element: ' + x + ', Y inside element: ' + y); }); ``` - `offset()` 获取的是元素相对于文档的位置。 - 通过减去这个偏移量,可以得到鼠标在该元素内部的坐标。 --- ### ✅ 示例:实时显示鼠标坐标 ```html <!DOCTYPE html> <html> <head> <title>Mouse Position</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <p>移动鼠标查看坐标:</p> <div id="output"></div> <script> $(document).on('mousemove', function(event) { $('#output').text('X: ' + event.pageX + ', Y: ' + event.pageY); }); </script> </body> </html> ``` --- ### 总结 | 属性 | 描述 | |--------------|--------------------------------| | `event.pageX` | 鼠标相对于整个页面的 X 坐标 | | `event.pageY` | 鼠标相对于整个页面的 Y 坐标 | | `event.clientX` | 鼠标相对于浏览器视口的 X 坐标 | | `event.clientY` | 鼠标相对于浏览器视口的 Y 坐标 | 根据你的需求选择合适的方法即可。需要我帮你写一个具体的应用场景吗?
上一篇:
jquery.ajax之beforeSend方法使用介绍
下一篇:
jQuery插件之ajaxFileUpload
标题录入,一次不能超过6条
留言
评论