ElementFromPoint для абсолютно позиционированных элементов?

Я использую elementFromPoint, чтобы найти элемент для передачи событий мыши после того, как они были захвачены маской пользовательского интерфейса. Я фиксирую событие в маске, скрываю маску, затем использую elementFromPoint(event.pageX, event.pageY), чтобы получить базовый элемент.

Проблема в том, что elementFromPoint не работает для абсолютно позиционированных элементов. Это просто дает первого не совсем позиционированного родителя. Есть ли способ получить как абсолютно, так и не совсем позиционированные элементы, или мне просто нужно выполнить ручной поиск по абсолютно позиционированным дочерним элементам, как только я получу родителя с помощью elementFromPoint?

Спасибо

2 ответа

Решение

Я попытался и создал код, он работает абсолютно нормально , посмотрите

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);
    });
});

Мой опыт показывает, что обычный старый document.elementFromPoint (...) работает и для абсолютно позиционированных элементов, но он чувствителен к "порядку" элементов (какой элемент действительно "впереди"). Я обнаружил, что иногда, чтобы заставить его работать так, как я хочу, я должен явно указать CSS z-index (иногда с положительным значением 10 или более) для абсолютно позиционированного элемента.

Это особенно важно, если элементы не имеют фона и содержат только текст, поскольку все они будут видны одновременно в одном и том же месте. По внешнему виду может быть трудно определить, кто из них действительно "впереди", возможно, не тот, о котором вы думаете.

Другие вопросы по тегам