Mousemove Event: положение мыши относительно родительского элемента

Question

У меня есть 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.

Любые идеи?

Answer 1

Чтобы получить положение мыши относительно внешнего 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);
}

См. этот стек для демонстрации.