ElementFromPoint 用于绝对定位的元素？

Posted 2023-03-05

【中文标题】ElementFromPoint 用于绝对定位的元素？

【英文标题】：ElementFromPoint for absolutely positioned elements?

【发布时间】：2013-07-16 14:46:19

【问题描述】：

我正在使用 elementFromPoint 来查找在鼠标事件被 ui 掩码捕获后将其传递给哪个元素。我在掩码处捕获事件，隐藏掩码，然后使用 elementFromPoint(event.pageX, event.pageY) 获取底层元素。

问题是 elementFromPoint 似乎根本不适用于绝对定位的元素。它只是给出了第一个非绝对定位的父级。有没有办法同时获取绝对定位和非绝对定位的元素，或者我是否只需要在使用 elementFromPoint 获得父级后手动搜索绝对定位的子级？

谢谢

【问题讨论】：

elementFromPoint 应该适用于绝对定位的元素。您能否提供一个 jsfiddle 来重现您的问题？

嗯，所以我只是做了一个 jsfiddle，但一切都像我认为的那样工作。一定是我的代码中某个不相关的错误：S 感谢您的帮助。

Derp，我使用的是与我的视口相关的点，而不是事件的 pageX 和 pageY (facepalm)

【参考方案1】：

我尝试并创建了代码，它工作得非常好have a look

html

<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>

css

div 
    width: 50px;
    height: 50px;
    background-color: black;
    color: white;
    margin-bottom: 30px;

#five
    position: absolute;
    left: 10px;
    top: 20px;
    background: red;

js

$(document).ready(function()        
    $(document.body).bind('click', function(e)
        var elem = document.elementFromPoint(e.pageX, e.pageY);

        alert('you selected element id: ' + elem.id);
    );
);

【参考方案2】：

我的经验是常规的旧 document.elementFromPoint(...) 也适用于绝对定位的元素，但它对元素的“顺序”很敏感（哪个元素是 真的“在前面”）。我发现有时要让它按我想要的方式工作，我必须在绝对定位的元素上明确指定 CSS“z-index”（有时具有 10 或更大的正值）。

如果元素没有背景并且只包含文本，这尤其是一个问题，因为所有这些元素都将同时在同一个地方可见。仅从外观上，很难判断哪一款是真正的“在前”，或许不是你想象的那一款。