Имитация наведения мыши или щелчка страницы для сброса события зависания

Question

У меня есть всплывающая подсказка на основе CSS, которая появляется при наведении курсора (mouseenter) и исчезает при mouseout / mouseleave; при щелчке запускается некоторый код, который удерживает пользователя на той же странице. Однако на мобильном устройстве части mouseenter и click запускаются одновременно, что дает мне видимую подсказку, которая не исчезает, пока вы не нажмете где-нибудь еще на странице, поскольку нет естественного mouseout / mouseleave.

Чтобы улучшить UX, я пытался смоделировать событие mouseout / mouseleave на элементе, по которому щелкнули мышью, через 1,5 с (используя setTimeout()), которое не работает:

$('.my-element').on('click', function() {
  // Other stuff

  setTimeout(function() {
    $(this).trigger('mouseleave');
  }, 1500);
});

и

$('.my-element').on('click', function() {
  // Other stuff

  setTimeout(function() {
    $(this).mouseleave();
  }, 1500);
});

Я также попытался использовать указанный c селектор элемента вместо $(this), который тоже не работал.

Теперь я пытаясь смоделировать щелчок страницы, чтобы сбросить событие при наведении, используя:

$('.my-element').on('click', function() {
  // Other stuff

  setTimeout(function() {
    $('body, html, #main').trigger('click');
  }, 1500);
});

Если я инициирую щелчок по другому элементу, такому как мое меню гамбургера, триггер работает. И если я вручную нажимаю где-нибудь еще на странице, он сбрасывает всплывающую подсказку и скрывает ее, чего я и пытаюсь достичь.

Я пытаюсь просто смоделировать то, что произойдет на mouseout щелчок по событию или странице в отличие от попытки нацеливания на сенсорные устройства, так как остальная часть поведения подходит для мобильных устройств.

Answer 1

Ваша подсказка выглядит не так чисто CSS, если она зависит от javascript событий. Я бы предложил создать всплывающую подсказку с помощью селектора :hover CSS - тогда он будет работать только на мыши .

.tooltipped{
  position:relative;
  display: inline-block;
}

.tooltip {
 position:absolute;
 left:100%;
 padding:2px;
 margin-left:2px;
 border:1px solid gray;
 background: #FFFF99;
 font-size:12px;
 opacity:0;
 transition: opacity 0.3s;
 
 }

 @media(hover: hover) {
  .has-tooltip:hover + .tooltip {
   opacity:1;
   transition: opacity 0.3s 0.3s;
  }
 }

 @keyframes touch-tooltip {
 from {
    opacity: 0;
 }
 10% {
    opacity: 1;
 }
 90% {
    opacity: 1;
}
to {
   opacity: 0;
}
}
@media(hover: none) {
 .has-tooltip:hover + .tooltip {
   transition: none;
   animation-duration: 2s;
   animation-name: touch-tooltip;
 }
 }

<div class="tooltipped">
<button class='has-tooltip'>Hello</button>
<span class='tooltip'>world</span>
</div>

PS Я также использовал селектор :focus, чтобы предотвратить отображение всплывающей подсказки.

PPS I удалено: селектор фокуса, поскольку он отключает всплывающие подсказки после сначала нажмите на кнопку. Вместо этого я использовал медиазапрос, чтобы отключить всплывающие подсказки на сенсорных экранах.

PPPS при наведении курсора + переход для мыши и при наведении курсора + анимация для сенсорного экрана

Answer 2

Я думаю, что когда вы создаете новую функцию (внутри setTimeout), она также меняет контекст «this». Вам нужно извлечь значение этого до того, как его контекст будет изменен.

Вы можете попробовать установить его в переменную, прежде чем пытаться ссылаться на него в течение времени ожидания

$('.my-element').on('click', function() {
  var element = this;
  // Other stuff

  setTimeout(function() {
    $(element).trigger('mouseleave');
  }, 1500);
});

или использовать функцию стрелки в тайм-аут, который не меняет контекст этого (но это может иметь проблемы совместимости браузера):

$('.my-element').on('click', function() {
  // Other stuff

  setTimeout(() => {
    $(this).trigger('mouseleave');
  }, 1500);
});