javascript/jquery：检测前两个元素中的哪一个

我有一堆元素，通过各种方法定位（绝对，固定和静态），各种z索引，其中一些是其他父项。有没有一种简单的，一般的方法来确定，对于任何两个元素，哪一个在另一个之前？javascript/jquery：检测前两个元素中的哪一个

我想到的办法是这样的：

Let A and B be the two elements. 
Let X and Y be two sibling elements such that X is A or an ancestor of A, and Y is B or an ancestor of B. 
If X has a higher z-index than Y, then A is in front of B.

然而，这似乎是很多的代码一个简单的问题，我也担心可能存在的角落情况下，它不”给出正确的答案。任何人有更好的主意？

来源

2012-10-17 josh

我的意思是，这些元素的计算样式将返回任何父元素的z-index的是，如果它是组。 'static'元素没有收到z-index，他们使用'auto'，然后默认在树上。如果他们的父母没有静态和z-索引以外的职位，那么他们只会拥有自动，这对于所有意图和目的来说也不是0。 – Ohgodwhy

如果你有一个它们可能重叠的x，y点的id，你可以使用'document.elementFromPoint（x，y）'返回最前面的元素。 – Shmiddty

@Shmiddty：我想过，但交叉点可能有第三个元素（用例是drag-n-drop代码，所以我拖动的东西可能会掩盖交叉点） – josh

所以这就是我想出的。不是很好。做了几个假设，通常为我工作，但可能不会为你工作：

假设条件是，孩子总是在父母面前（你可以通过混合相对和绝对定位打破了这种假设）
假设你不会给两个同胞z-index。计数自动为0

下面的代码（在CoffeeScript中，使用jQuery）：

is_in_front_of = (div1, div2) -> 

    z_index = (d) -> 
     z = d.css 'z-index' 
     z ?= 0 
     if z == 'auto' then z = 0 
     return z 

    if $.contains div1[0], div2[0] 
     return false 

    if $.contains div2[0], div1[0] 
     return true    

    while div1.parent().length > 0 and not $.contains div1.parent()[0], div2[0] 
     div1 = div1.parent() 

    while div2.parent().length > 0 and not $.contains div2.parent()[0], div1[0] 
     div2 = div2.parent() 

    return z_index(div1) > z_index(div2)

来源

2012-10-17 18:31:11 josh

javascript/jquery：检测前两个元素中的哪一个

回答

相关问题