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

1

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

Есть идеи?

  • 0
    вы пытались e.preventDefault() с e.stopPropagation();
  • 0
    Похоже, что он работает со стандартным связыванием событий, без остановки распространения. Смотрите этот стек
Показать ещё 2 комментария
Теги:
angular

1 ответ

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

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

  • 0
    Спасибо! Это работает довольно хорошо.
  • 0
    У меня была ситуация, когда я не мог контролировать положение прокрутки при загрузке, поэтому мне пришлось взглянуть на window.scrollY и вычесть его сверху. let top = e.pageY - overlay_offset.top - scrollY_offset;

Ещё вопросы

Сообщество Overcoder
Наверх
Меню