如何使用 jQuery 获取相对于目标元素的准确鼠标点击坐标？
- Mary-Kate Olsen原创
- 2024-12-05 22:51:14634浏览
使用 jQuery 了解目标元素上的鼠标单击坐标
使用 jQuery 处理 HTML 元素上的单击事件时，了解如何准确检索鼠标坐标至关重要相对于目标元素的指针。让我们通过详细的示例来探讨和阐明这个主题。
问题诊断
考虑以下事件处理程序：
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
目标是获取鼠标指针相对于单击时的#seek-bar 元素。但是，提供的代码可能会产生不正确的结果。
了解位置属性
1. event.pageX, event.pageY:
这些属性提供鼠标指针相对于整个文档的坐标。
参考： http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2. offset():
此函数返回元素在其包含文档中的偏移位置（距页面左上角的距离）。
参考： http://api.jquery.com/offset/
3. position():
此函数返回元素在其包含文档中的位置（相对于其父元素）。
参考： http://api .jquery.com/position/
要解决最初的问题，考虑这些位置属性及其预期用途至关重要。在这种情况下，要获取鼠标指针相对于 #seek-bar 的位置，我们应该使用 offset() 函数而不是 offsetLeft。
更正的代码：
jQuery("#seek-bar").click(function(e){
var x = e.pageX - $(this).offset().left;
alert(x);
});
示例演示
为了说明这些位置属性之间的差异，这里有一个示例 HTML 代码段和相应的 JavaScript 代码：
HTML
<body> <div>
JavaScript
$(document).ready(function (e) {
$('#A').click(function (e) { //Default mouse Position
alert(e.pageX + ' , ' + e.pageY);
});
$('#B').click(function (e) { //Offset mouse Position
var posX = $(this).offset().left,
posY = $(this).offset().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
$('#C').click(function (e) { //Relative ( to its parent) mouse position
var posX = $(this).position().left,
posY = $(this).position().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
});
通过点击这些 div，您可以根据所使用的位置属性观察不同的结果。
以上是如何使用 jQuery 获取相对于目标元素的准确鼠标点击坐标？的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn