-2

Queria uma forma de somente disparar o evento se o usuário permanecer com o mouse em cima do alvo por mais de 3 segundos. Caso ele permaneça por menos de 2 segundos o evento não deve ser disparado.

const e = document.querySelector("p");
e.onmouseenter = () => {
  alert(e.textContent);
};
p {
  margin: auto;
  width: fit-content;
  padding: 10px;
}
<p>Passe o mouse<p>

1 Resposta 1

2

Basta usar setTimeout no mouseenter e clearTimeout no mouseleave, exemplo:

let timeout;

const e = document.querySelector("p");

e.onmouseenter = () => {
  // 3 segundos
  timeout = setTimeout(() => alert('Olá mundo'), 3000);
};

e.onmouseleave = () => {
  clearTimeout(timeout);
};
p {
  margin: auto;
  width: fit-content;
  padding: 10px;
}
<p>Passe o mouse<p>

Compatível com navegadores mais antigos e novos:

var timeout;
var e = document.querySelector("p");

e.onmouseenter = function() {
  // 3 segundos
  timeout = setTimeout(function() {
    alert('Olá mundo');
  }, 3000);
};

e.onmouseleave = function() {
  clearTimeout(timeout);
};
p {
  margin: auto;
  width: fit-content;
  padding: 10px;
}
<p>Passe o mouse<p>

4
  • Show brother, bom demais , muito obrigado 15/03/2021 às 13:36
  • @ErenilsonChristopher se a resposta resolveu seu problema por favor marque-a como correta
    – Syzoth
    15/03/2021 às 13:37
  • 1
    Blz, so estou esperando o intervalo de 4 minutos 15/03/2021 às 13:43
  • @ErenilsonChristopher eu sempre esqueço desse intervalo, faz muito tempo que não respondo no site :) obrigado!
    – Syzoth
    15/03/2021 às 13:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .