如何找到位于给定 (X,Y) 位置的 DOM 节点? (命中测试)

2024-06-22

我有 HTML 文档中一个点的坐标 (X,Y)。如何确定这些坐标处的 DOM 节点是什么?

一些想法:

  • 是否有我错过的 DOM 命中测试函数,它需要一个点 (X,Y) 并返回那里的 DOM 元素?
  • 有没有一种有效的方法来遍历 DOM 元素树来查找包含元素?由于绝对定位的元素,这似乎很棘手。
  • 有没有办法在给定的 (X,Y) 位置模拟事件,以便浏览器最终创建一个具有指向该元素的指针的事件对象?

(背景:我正在将 Qt 的 QWebView 嵌入本机应用程序中。我试图根据鼠标悬停的 DOM 节点来改变 Qt 小部件提供的上下文菜单,但 Qt 4.5 无法对 DOM 元素进行命中测试,尽管该功能将在 4.6 中推出。所以我希望我可以将坐标放入 Javascript 中并使用 DOM API 进行命中测试。)

Thanks!


只要您的用户不使用旧版本的 Safari、Chrome 或 Opera,您就很幸运:使用document.elementFromPoint(x, y) (MSDN ref http://msdn.microsoft.com/en-us/library/ms536417(VS.85).aspx, Mozilla 参考 https://developer.mozilla.org/En/DOM:document.elementFromPoint, 怪癖模式文章 http://www.quirksmode.org/blog/archives/2010/06/more_ie9_goodne.html):

返回文档中的元素 ...这是最上面的元素 位于给定点下方。

如果您需要支持较旧的浏览器,除了您建议的之外,我想不出很多选择(遍历整个 DOM,查看元素位置和大小并查看它们中是否有任何一个封装了您的 (x, y))。

我认为事件模拟不会起作用,但这是一个有趣的想法。我对事件调度的理解是,您指定事件的目标,这正是您首先要找出的目标。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何找到位于给定 (X,Y) 位置的 DOM 节点? (命中测试) 的相关文章

  • qml 和 c++ 以及 qt Quick 2 应用程序

    我的主窗口有一个 qml GUI 我刚刚创建了一个 qt Quick2 应用程序 并将主窗口的 qml GUI 复制并粘贴到 main qml 当我运行该应用程序时 它显示空白窗口 以下是我的 qml 日志 QML debugging is
  • 可以跨 iframe 共享 javascript 导入吗?

    我有一个 Web 应用程序 其中有多个 iframe 它们都需要导入相同的 javascript 库 例如 jquery 有没有办法只加载一次并以某种方式在所有 iframe 之间共享该数据 我不想让我的页面加载缓慢 因为它为每个 ifra
  • 克隆表行

    我怎样才能使用javascript 我假设 来克隆一个表格行 就像下图所示的那样 您可以将现场活动连接到所有按钮 例如 如果您给他们一类克隆 则以下内容将起作用 input clone live click function put jqu
  • 用玩笑模拟高阶组件

    我想确保 HOC 组件被开玩笑地调用 但我似乎无法理解jest mock上班 我的 HOC 是这样的 const withEntity args gt const wrappedComponent WrappedComponent gt c
  • 如何在 Jasmine JS 中重用 beforeEach/afterEach?

    当使用 JasmineJS 编写测试时 我有许多具有类似 beforeEach afterEach 代码的测试 有没有办法使用 JasmineJS 测试套件实现继承模型 我可以将所有测试分组为一个describe但在这种情况下 我将以包含所
  • 计算两列中两个总和的平均值,并将其显示在 JQGrid 的下一列中

    I m using Jqgrid with summery row at grouping level Now I want to know one thing that Is it possible to show average cal
  • 如何使用React Native在屏幕上绘图?

    我正在尝试在 React Native 中实现一个 Android 绘图应用程序 我正在使用 PanResponder 但我不知道如何获取用户触摸的部分的坐标 我尝试过使用react native svg但我不知道该放在哪里PanRespo
  • 使用 mongoDB 插入子文档

    我收集了以下文件 id 2 workspace name 1 widgets name 2 widgets name 3 widgets name 4 widgets 我怎样才能插入 id 1 blabla blabla 在 小部件 中的
  • Taglib:性能和崩溃问题

    我在 Qt 应用程序中使用 taglib 库 1 7 2 从音乐文件夹中读取 mp3 文件的一些元数据 问题是我发现它非常慢 例如 这是代码 QString path C Music QDir d path QStringList file
  • 通过标记或JS强制下载

    假设我在 CDN 来自 Rackspace 的云文件 上有一个文件 以及一个包含该文件链接的静态 html 页面 有什么方法可以强制下载此文件 以防止它在浏览器中打开 例如 mp3 我们可以让我们的服务器读取该文件并将相应的标头设置为 he
  • ECMAScript 中定义的内部属性是什么?

    什么是内部属性 http es5 github com x8 6在 ECMAScript 中定义为 规格是什么意思 该规范使用各种内部属性来定义 对象值的语义 这些内部属性不是 ECMAScript 语言 它们是由本规范定义的 纯粹用于说明
  • 如何在 Google 地图上旋转叠加图像?

    我正在尝试将一系列叠加层放置到 Google 地图上 我正在跟随地面覆盖层的示例代码 https developers google com maps documentation javascript examples groundover
  • LightningChart JS - LineSeries / Progressive X 的损坏

    我在使用 LightningChart 时遇到了一个有趣的问题 它似乎会破坏或以其他方式减少我的数据 具体取决于它与图表的 DateOrigin 的距离 我的数据是每秒 1000 个样本 我试图一次显示 1 2 周的数据 我正在使用 Cha
  • 为什么我的数据没有存储到我的 Firebase 实时数据库中?

    我正在尝试为网络应用程序制作一个注册页面 这会将数据发送到 firebase 数据库 我已阅读官方 firebase 文档并按照说明写入数据 但什么也不会写 在我的数据库控制台中 它显示的所有内容都是空 而不是我的数据 我没有收到控制台错误
  • execCommand 的替代品

    我希望创建一个所见即所得编辑器 使用 jQuery 作为框架 我可以使用不同的方法来简化生产 我现在确实有一个正在工作的编辑 而且运作良好 我使用 iFrame 并将其设计模式设置为打开并从那里开始 然而 有一些事情困扰着我 以更改所选文本
  • 多个引导模式的滚动问题

    我有一个带有大量信息的模态页面 因此您需要滚动 该模式包含指向第二个模式的链接 When I 打开模态 1 单击链接打开模式 2 模式 1 保持在后台 然后关闭模式 2 以便我回到模式 1 modal 1 失去滚动 仍然有一个滚动条 但它不
  • 如何拦截javascript中innerHTML的变化?

    我需要拦截网页内单元格内容的任何更改 以下代码显示 addEventListener 不起作用 function modifyText alert var el document getElementById mycell el inner
  • 如何从索引文件迭代多个导入的模块

    我有一个名为Polygons我在那里创建了一个index jsfile 以导出目录中的所有文件 它看起来像这样 export default as europe from europe export default as northAmer
  • 如何使用 jQuery 解析 JavaScript 对象

    jQuery JavaScript 中用于解析 JSON 对象并返回键 值对的 foreach 等效项是什么 JSON 对象 是什么意思 JSON 是一种用于序列化对象的文本格式 如果要循环访问通过反序列化 JSON 字符串获得的对象中的属
  • ASP.NET MVC3 Ajax.ActionLink - 条件确认对话框

    我有一个 Ajax ActionLink 仅当满足某些条件 用户有未保存的更改 时 我才希望显示一个确认对话框 我创建了一个 JavaScript 函数 它根据需要显示确认对话框 并根据响应返回 true 或 false 我将其绑定到 Ac

随机推荐