Получить элемент который находится в определенном блоке по заданным координатам?

Question

[newaitix]

<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

У меня есть координаты курсора.
Как имея только эти координаты узнать над каким элементом сейчас находится курсор ?

Comments

[Dima Polos]

https://learn.javascript.ru/coordinates

[newaitix]

Dima Polos, да. Но я сейчас использую elementFromPoint.
И я всегда получаю один и тот же элемент.

[AlexBoss]

боюсь спросить, чем обработчик событий вам не подходит?

[newaitix]

AlexBoss, тем, что он не сработает никогда.

[newaitix]

AlexBoss, ни mouseover, ни mouseout, ни mouseenter, ни mouseleave. Ни один не сработает никогда.

[AlexBoss]

newaitix, да что ты) ну тогда через координаты делай)

[AlexBoss]

newaitix, https://learn.javascript.ru/mousemove-mouseover-mo...
Смотри чудеса какие есть, но раз не работает, не буду отвлекать

[newaitix]

AlexBoss, я же говорю что не сработает ни mouseover, ни mouseout, ни mouseenter, ни mouseleave.
Хочешь узнать почему ?

[newaitix]

AlexBoss, даже elementFromPoint не будит работать.

[Dima Polos]

newaitix, так а код на js можно глянуть? Почему не сработает mouseover и прочее?

[newaitix]

Dima Polos,

findDroppable=function(ev){
	var elem=document.elementFromPoint(ev.clientX,ev.clientY);
// elem - это всегда перетаскиваемый элемент.
}
move=function(ev){
	dragResult=findDroppable(ev);
}
down=function(ev){
	document.onmousemove=move;
}
document.onmousedown=down;

Не срабатывает потому что между курсором и целевым элементом всегда находится перетаскиваемый элемент.
Поэтому elementFromPoint всегда возвращает перетаскиваемый элемент.
Поэтому собственно не отрабатывет mouseover, mouseout, mouseenter, mouseleave.

Answer 1

[newaitix]

Все оказалось проще. Перед тем как выполнить elementFromPoint я делаю перетаскиваемый элемент

position:'absolute',
'z-index':-1

затем
elementFromPoint
а затем у меня по коду идет установка для перетаскиваемого элемента

position:'absolute',
top:(ev.clientY+jsl(config.blankId).animate('scrollTop')-dw.y)+'px',
left:(ev.clientX+jsl('body').animate('scrollLeft')-dw.x)+'px',
width:jsl(dragObject.block).css('offsetWidth')-2+'px',
'z-index':1,
background:'transparent',
border:'1px solid rgba(128,128,128,.5)'

Так все работает.

Answer 2

[McBernar]

В чем проблема взять координаты левого верхнего угла элемента, высчитать множество точек исходя из этих данных и computed-размеров элемента и проверять на попадание курсора в это множество?

Comments

[newaitix]

Ну это самый сложный вариант. Хотелось бы избежать его.