Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.05.2020, 11:53
Новичок на форуме
Отправить личное сообщение для grydni4ok_01 Посмотреть профиль Найти все сообщения от grydni4ok_01
 
Регистрация: 25.05.2020
Сообщений: 2

не могу понять, почему не работает событие движение мыши
Добрый день. Пытаюсь написать класс, который будет выводить подсказку у 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);
а он не работает, кто может подсказать почему?
Ответить с цитированием
  #2 (permalink)  
Старый 25.05.2020, 14:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

grydni4ok_01,
17,18,33 .bind(this)
Ответить с цитированием
  #3 (permalink)  
Старый 25.05.2020, 15:34
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

grydni4ok_01,
Неправильно каждый mouseover добавлять mousemove, он же не заменяется, а прибавляется.
Ответить с цитированием
  #4 (permalink)  
Старый 25.05.2020, 18:47
Новичок на форуме
Отправить личное сообщение для grydni4ok_01 Посмотреть профиль Найти все сообщения от grydni4ok_01
 
Регистрация: 25.05.2020
Сообщений: 2

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не могу понять, помогите, indexOf SergoMorello Общие вопросы Javascript 17 02.11.2017 19:50
Не могу понять как работает простой скрипт. Argonaft jQuery 5 22.09.2017 00:23
Не работает событие change на поле input rybachok91 jQuery 28 09.09.2017 07:29
Не работает console.log.apply(this,arguments) - Почему? Почемучкин Javascript под браузер 9 31.10.2014 17:17
Не могу понять как работает jQuery kostiaGt jQuery 2 20.07.2008 08:42