logo标签列表

根据x和y位置获取DIV id

javascript
9

我要解决的问题是“这个位置上是什么？”

获取 DIV（或任何元素）的 x/y 位置（偏移量）相当简单，但反过来呢？如何在给定 x/y 位置的情况下获取 DIV 的 id？

9个回答
4
很遗憾，触发制造/模拟鼠标事件是行不通的，因为当你分派它时，你必须提供一个目标元素。由于该元素是你要找出的那个，你所能做的就是在body上分派它，就好像它已经冒泡了。
你真的只能自己手动遍历你感兴趣的元素，并将它们的位置/大小/zIndex与你的x/y点进行比较，看它们是否重叠。除了IE和最近的FF3，你可以使用。
var el = document.elementFromPoint(x, y);

See

http://developer.mozilla.org/En/DOM:document.elementFromPoint

http://msdn.microsoft.com/en-us/library/ms536417(VS.85).aspx

3
function getDivByXY(x,y) {
   var alldivs = document.getElementsByTagName('div');

   for(var d = 0; d < alldivs.length; d++) {
      if((alldivs[d].offsetLeft == x) && (alldivs[d].offsetTop == y)) {
         return alldivs[d];
      }
   }

   return false;
}
2
使用jQuery选择器来过滤所有DIV列表中符合您位置条件的一个？
2
创建一个鼠标事件监听器，然后在该位置触发鼠标事件。这将为您提供该位置的所有元素堆栈。
或者，查看Firebug的源代码。
2
如果你只有X和Y位置（并且像你提到的那样无法跟踪鼠标移动），那么你将不得不遍历DOM，循环遍历每个DIV。对于每个DIV，您需要将其X和Y坐标与您拥有的坐标进行比较。这是一项昂贵的操作，但这是唯一的方法。我建议你最好重新思考你的问题，而不是为它想出一个解决方案。
1

一种选择是构建一个“div-dimension”对象数组。（不要与div本身混淆...当你从对象中读取尺寸时，IE7的性能令人沮丧。）

这些对象包括指向div的指针、它们的尺寸（四个点...比如顶部、左侧、底部和右侧），以及可能的脏位。（只有在尺寸改变时才真正需要脏位。）

然后，您可以遍历数组并检查尺寸。每次鼠标移动都需要O(n)。也许您可以用二分搜索风格的方法稍微提高效率。

如果您采用二分搜索风格的方法，一种方法是存储4个数组。每个数组都有一个维度的单个点，然后对所有四个进行二分搜索。O(4logn)=O(logn)。

我不是说我推荐其中任何一种，但它们可能有效。

1

我认为John的意思是，你可以使用document.createEvent()来模拟鼠标移动到你想要的位置。如果你通过为body添加一个eventlistener来捕获该事件，你就可以查看event.target并看看在那个位置上哪个元素。我不确定IE支持这种方法的程度，也许有其他人知道？

http://developer.mozilla.org/en/DOM/document.createEvent

更新：这里有一个模拟事件的 jQuery 插件：

http://jquery-ui.googlecode.com/svn/trunk/tests/simulate/jquery.simulate.js

0

这可能会占用太多处理器资源，但是遍历页面上所有div元素的列表，找到它们的位置和大小，然后测试它们是否在鼠标下方。不过我认为我不想这样做给浏览器带来负担。

0

当页面加载时，遍历DOM树一次，获取所有元素的位置和大小，并将它们存储在数组/哈希表等数据结构中，可能会更有效率。如果你设计好了数据结构，当你需要后续查找元素时，应该能够快速地找到给定坐标下的元素。

考虑一下你需要检测元素的频率，并将其与页面上元素的更改频率进行比较。你需要权衡重新计算所有元素位置的次数（这是一个昂贵的计算）与实际使用计算信息的次数（相对便宜，我希望如此）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接