Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   не могу понять, почему не работает событие движение мыши (https://javascript.ru/forum/events/80337-ne-mogu-ponyat-pochemu-ne-rabotaet-sobytie-dvizhenie-myshi.html)

grydni4ok_01 25.05.2020 11:53

не могу понять, почему не работает событие движение мыши
 
Добрый день. Пытаюсь написать класс, который будет выводить подсказку у html-элементов, у которых есть атрибут data-tooltip. Сама подсказка выводится, но хочу чтобы подсказка двигалась за мышью, и не как не могу повесить обработчик чтобы он корректно работал
class Tooltip{
  static instance = null;

  constructor(){
    if (Tooltip.instance) {
      return Tooltip.instance;
    }

    let div = null;

    this.initLisener();

    Tooltip.instance = this;
  }

  initLisener(){
    document.addEventListener('mouseover', this.onMouseOver);
    document.addEventListener('mouseout', this.onMouseOut);    
  }

  onMouseOver(event){
    if (!event.target.closest('[data-tooltip]')) { return; }

    let elem = event.target.closest('[data-tooltip]');

    this.div = document.createElement('div');
    this.div.className = 'tooltip';
    this.div.style.top = `${event.clientY + 10}px`;
    this.div.style.left = `${event.clientX + 5}px`;
    this.div.innerHTML = elem.dataset.tooltip;
    document.body.append(this.div);    

    document.addEventListener('mousemove', this.onMouseMove);
  } 

  onMouseMove(event) {
    this.div.style.top = `${event.clientY + 10}px`;
    this.div.style.left = `${event.clientX + 5}px`;   
  }


  onMouseOut(event){
    if (this.div) {
      this.div.remove();
    }
  }

}

let tooltip = new Tooltip();

Вешаю обработчик
document.addEventListener('mousemove', this.onMouseMove);
а он не работает, кто может подсказать почему?

рони 25.05.2020 14:39

grydni4ok_01,
17,18,33 .bind(this)

grydni4ok_01 25.05.2020 18:47

да, спасибо большое, помогло, все работает


Часовой пояс GMT +3, время: 03:32.