Форум

AleksSergSB · #1 (**permalink**) 19.11.2019, 07:00

Доброго дня!

Дано:
Не простая верстка, много объектов. Объектов много динамических.
jquery присутствует. Не люблю его, но уже "врезался" в его методы и он меня удивляет, или моих знаний не хватает.

Задача:
При наведении на объект появляется текст по событию "mousemove", этот текст появляется поверх наводимого объекта. Исчезает по событию "mouseleave", когда курсор уходит с объекта.

Проблема:
Так как текст появляется поверх наводимого объекта, то при наведении на сам текст - срабатывает событие "mouseleave" и текст исчезает. Разумеется такого быть не должно. Текст не должен исчезать пока курсор находится внутри объекта.

Дополнительно дано:
Текст со свойством position:absolute и находится вне наводимого объекта. Поэтому изменить событие на подходящее не получится.

уже пробовал:
даже не задумываясь о проблеме создал глобальную переменную которую буду менять по событию. И исходя из этой переменной убирать текст только тогда, когда курсор не наведен на этот текст

$(document).on('mousemove', '.slide__text_m', function () {
    // console.log("по тексту ходим!");
    globPositionSlideText=true;
  })
  $(document).on('mouseleave', '.slide__text_m', function () {
    // console.log("ушли с текста");
    globPositionSlideText=false;
  })

Но, результат меня удивил:

$(document).on('mouseleave', '.slide', function () {
(...)
console.log("ДО задержки: "+globPositionSlideText);
setTimeout(function(){console.log("Задержка: "+globPositionSlideText);},1);
}
/*
ДО задержки: false
Задержка: true
*/

Вероятно исполнение события mouseleave раньше нежели mousemove. Не проблема, упакуем все в функцию и setTimeout.
На этот раз результат меня шокировал:

$(document).on('mouseleave', '.slide', function () {
      setTimeout(mouseleaveEvent(this),1000);
      function mouseleaveEvent(thiss){
       console.log("ДО задержки: "+globPositionSlideText);
       setTimeout(function(){console.log("Задержка: "+globPositionSlideText);},1);
       (...)
     }
/*
ДО задержки: false
Задержка: true
*/
})

1) Почему так происходит?

2) Как решить поставленную задачу методами JS ?

Для удобства я набросал код сюда: https://codepen.io/Aleksandr_/pen/pooGvdP