首页 > web前端 > css教程 > 正文

如何在jQuery中准确获取相对于元素的点击坐标?

DDD
发布: 2024-11-12 18:09:02
原创
202 人浏览过

How to Accurately Get Click Coordinates Relative to an Element in jQuery?

使用 jQuery 获取目标元素上的单击坐标

使用 jQuery 处理 HTML 元素上的单击事件时,在尝试查找相对于元素。这可能是由于对可用 jQuery 方法的误解造成的。

event.pageX 和 event.pageY

这些属性提供相对于文档的鼠标位置。它们并不特定于目标元素。

offset()

此方法给出元素相对于其父元素的偏移位置。它通常用于确定元素在页面上的位置,但它不会给出相对于元素本身的鼠标位置。

position()

与 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板