How to fire an event if the user stays up with the mouse for more than 3 seconds?

Question

I wanted a way to only fire the event if the user remained with the mouse on the target for more than 3 seconds. If it remains for less than 2 seconds the event should not be triggered.

const e = document.querySelector("p");
e.onmouseenter = () => {
  alert(e.textContent);
};

p {
  margin: auto;
  width: fit-content;
  padding: 10px;
}

<p>Passe o mouse<p>

Answer 1

Just use setTimeout in the mouseenter and clearTimeout in the mouseleave, example:

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>

Compatible with older and new browsers:

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>