使用 jQuery 处理 HTML 元素上的单击事件时,在尝试查找相对于元素。这可能是由于对可用 jQuery 方法的误解造成的。
这些属性提供相对于文档的鼠标位置。它们并不特定于目标元素。
此方法给出元素相对于其父元素的偏移位置。它通常用于确定元素在页面上的位置,但它不会给出相对于元素本身的鼠标位置。
与 offset() 不同,此方法给出元素相对于其直接父元素的相对位置。它对于获取内部容器内元素的位置非常有用。
要演示这些方法之间的差异,请考虑以下 HTML:
<div>
以及以下 JavaScript 事件处理程序:
jQuery("#seek-bar").click(function(e) { // Incorrectly uses offset() var x = e.pageX - jQuery(this).offset().left; console.log(x); // Correctly uses position() var x = e.pageX - jQuery(this).position().left; console.log(x); });
单击 #seek-bar 时,您会注意到第一个控制台日志会生成结果不正确,因为它使用 offset(),它给出了元素在页面上的绝对位置。然而,第二个控制台日志使用position()提供了相对于元素的正确鼠标位置。
以上是如何在jQuery中准确获取相对于元素的点击坐标?的详细内容。更多信息请关注PHP中文网其他相关文章!