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 или более) для абсолютно позиционированного элемента.
Это особенно важно, если элементы не имеют фона и содержат только текст, поскольку все они будут видны одновременно в одном и том же месте. По внешнему виду может быть трудно определить, кто из них действительно "впереди", возможно, не тот, о котором вы думаете.