我要解决的问题是“这个位置上是什么?”
获取 DIV(或任何元素)的 x/y 位置(偏移量)相当简单,但反过来呢?如何在给定 x/y 位置的情况下获取 DIV 的 id?
我要解决的问题是“这个位置上是什么?”
获取 DIV(或任何元素)的 x/y 位置(偏移量)相当简单,但反过来呢?如何在给定 x/y 位置的情况下获取 DIV 的 id?
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
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;
}
一种选择是构建一个“div-dimension”对象数组。(不要与div本身混淆...当你从对象中读取尺寸时,IE7的性能令人沮丧。)
这些对象包括指向div的指针、它们的尺寸(四个点...比如顶部、左侧、底部和右侧),以及可能的脏位。(只有在尺寸改变时才真正需要脏位。)
然后,您可以遍历数组并检查尺寸。每次鼠标移动都需要O(n)。也许您可以用二分搜索风格的方法稍微提高效率。
如果您采用二分搜索风格的方法,一种方法是存储4个数组。每个数组都有一个维度的单个点,然后对所有四个进行二分搜索。O(4logn)=O(logn)。
我不是说我推荐其中任何一种,但它们可能有效。
我认为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
这可能会占用太多处理器资源,但是遍历页面上所有div元素的列表,找到它们的位置和大小,然后测试它们是否在鼠标下方。不过我认为我不想这样做给浏览器带来负担。
当页面加载时,遍历DOM树一次,获取所有元素的位置和大小,并将它们存储在数组/哈希表等数据结构中,可能会更有效率。如果你设计好了数据结构,当你需要后续查找元素时,应该能够快速地找到给定坐标下的元素。
考虑一下你需要检测元素的频率,并将其与页面上元素的更改频率进行比较。你需要权衡重新计算所有元素位置的次数(这是一个昂贵的计算)与实际使用计算信息的次数(相对便宜,我希望如此)。