给定同一文档中的两个abitrary HTML元素A和B,如何找出哪个"更接近"用户(即如果它们重叠,哪一个模糊另一个)？
在W3C CSS规范描述堆叠内容,这符合渲染引擎应该实现.但是,我找不到在JavaScript程序,跨浏览器中访问此信息的方法.我所能读到的只是css z-index属性,本身并没有多说,因为大部分时间都设置为auto或者,即使表示为数值,也不是它实际显示方式的可靠指标(如果它们属于对于不同的statcking上下文,比较z-index是无关紧要的).
请注意,我对任意元素感兴趣:如果两个元素都在鼠标指针下方,则只有一个被认为是"悬停",所以在这种情况下我可以轻松找到最接近的元素.但是,我正在寻找一种更通用的解决方案,最好是不涉及重新实现渲染引擎已经执行的堆叠算法的解决方案.
更新:让我澄清一下这个问题背后的原因:我最近解决了一个暴露jQuery拖放机制限制的问题 - 它在删除时不会考虑z索引,所以如果一个元素模糊了另一个,它仍然可以在"后面"的元素中执行放置操作.虽然针对OP特定案例回答了相关问题,但一般问题依然存在,而且我所知道的解决方案并不容易.
alex下面的答案很有用,但对于手头的情况还不够:拖动时,拖动的元素本身(或者更确切地说是它的帮助器)是鼠标光标下面的最顶层元素,因此elementFromPoint将返回它而不是下一个最顶层的元素,我们确实需要(解决方法: 设置光标样式,使其位于助手之外).jQuery采用的其他交集策略也不仅仅考虑了一个点,这使得确定与助手交叉的最顶层元素的任务变得复杂化.能够通过实际z-index比较(或排序)元素将使得"z-index感知"交叉模式对于一般情况是可行的.