Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.11.2019, 07:00
Аспирант
Отправить личное сообщение для AleksSergSB Посмотреть профиль Найти все сообщения от AleksSergSB
 
Регистрация: 20.11.2016
Сообщений: 74

mouseleave VS mousemove. Чего-то не понимаю!
Доброго дня!

Дано:
Не простая верстка, много объектов. Объектов много динамических.
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
Ответить с цитированием
  #2 (permalink)  
Старый 19.11.2019, 07:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от AleksSergSB
Так как текст появляется поверх наводимого объекта, то при наведении на сам текст - срабатывает событие "mouseleave" и текст исчезает.
Сам текст является потомком того объекта?
Если так - можно добавить событие mouseover и там опять сделать текст видимым...
https://learn.javascript.ru/mousemov...ode-na-potomka
Ответить с цитированием
  #3 (permalink)  
Старый 19.11.2019, 07:32
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

AleksSergSB, будет более нагляднее если ты сделаешь тестовый пример своей ситуации...
Ответить с цитированием
  #4 (permalink)  
Старый 19.11.2019, 08:02
Аспирант
Отправить личное сообщение для AleksSergSB Посмотреть профиль Найти все сообщения от AleksSergSB
 
Регистрация: 20.11.2016
Сообщений: 74

Сообщение от ksa Посмотреть сообщение
Сам текст является потомком того объекта?
Если так - можно добавить событие mouseover и там опять сделать текст видимым...
https://learn.javascript.ru/mousemov...ode-na-potomka
Нет. Я указал это в задачи.
Ответить с цитированием
  #5 (permalink)  
Старый 19.11.2019, 08:02
Аспирант
Отправить личное сообщение для AleksSergSB Посмотреть профиль Найти все сообщения от AleksSergSB
 
Регистрация: 20.11.2016
Сообщений: 74

Сообщение от ksa Посмотреть сообщение
AleksSergSB, будет более нагляднее если ты сделаешь тестовый пример своей ситуации...
Так же указал в задачи

Для удобства я набросал код сюда: https://codepen.io/Aleksandr_/pen/pooGvdP
Ответить с цитированием
  #6 (permalink)  
Старый 19.11.2019, 09:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

AleksSergSB,
.testText{

   pointer-events: none;
}

mousemove mouseenter
Ответить с цитированием
  #7 (permalink)  
Старый 19.11.2019, 09:03
Аспирант
Отправить личное сообщение для AleksSergSB Посмотреть профиль Найти все сообщения от AleksSergSB
 
Регистрация: 20.11.2016
Сообщений: 74

Сообщение от рони Посмотреть сообщение
AleksSergSB,
.testText{

   pointer-events: none;
}

mousemove mouseenter
Так можно было!!!
Респект!! Спасибо большое!
Ответить с цитированием
  #8 (permalink)  
Старый 19.11.2019, 09:05
Аспирант
Отправить личное сообщение для AleksSergSB Посмотреть профиль Найти все сообщения от AleksSergSB
 
Регистрация: 20.11.2016
Сообщений: 74

Вы мне уже видимо помогали, не могу Вас плюсануть! Эххх
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сайт для работы с VK API, OpenAPI. С чего начать? Win32 Серверные языки и технологии 2 29.01.2014 22:23
Кстати а с чего megaupload Оффтопик 11 09.03.2013 20:45
canvas: С чего лучше начать? Esigns Общие вопросы Javascript 1 08.01.2013 10:44
Чего я не понимаю в .each() ? LittlePony jQuery 10 24.08.2012 00:35
я ни чего не понимаю в скриптах помогите пожалуйста анно4ка Общие вопросы Javascript 3 29.07.2009 00:05