У меня есть div, который я хочу прослушать событие mousemove
чтобы увидеть смещение между мышью и вершиной div (поэтому я использую event.layerY). Внутри этого div у меня есть еще один div.
Проблема в том, что когда я перемещаю мышь над этим внутренним div, мое событие mousemove
слушает внутренний div, а не внешний div, где я устанавливаю слушателя. Значение event.layerY
даст мне смещение к внутреннему div, а не к внешнему div.
Это мой код:
this.draglistener = this.renderer.listen(this.container.nativeElement, 'mousemove', e => {
e.stopPropagation();
});
Как вы видите, я устал stopPropagation()
но это не работает. Я также пробовал:
if (e.target !== this.container.nativeElement) {
return;
}
Но таким образом он просто перестает слушать событие, перемещаясь по внутреннему div. Так что это тоже не работает.
Также я не могу делать pointer-events: none;
для внутреннего div, потому что мне нужно слушать другие события на этом div.
Есть идеи?
Чтобы получить положение мыши относительно внешнего div
, вычтите позицию клиента внешнего div
из клиентской позиции мыши. Контрольная переменная-шаблон outerDiv
может использоваться для передачи внешнего элемента обработчику события.
<div #outerDiv (mousemove)="onMouseMove($event, outerDiv)">
<div class="innerDiv">
</div>
</div>
В обработчике событий позиция мыши клиента получается с event.clientX
и event.clientY
, а внешняя позиция клиента div
получается с помощью outerDiv.getBoundingClientRect()
.
onMouseMove(event: MouseEvent, outerDiv: HTMLElement) {
const bounds = outerDiv.getBoundingClientRect();
const posX = event.clientX - bounds.left;
const posY = event.clientY - bounds.top;
console.log(posX, posY);
}
Посмотрите этот стэкблиц для демонстрации.
window.scrollY
и вычесть его сверху. let top = e.pageY - overlay_offset.top - scrollY_offset;
e.preventDefault()
сe.stopPropagation();