Détecter lorsque le curseur est sur un élément

Bonjour, j'aimerais pouvoir arrêter un setInterval lorsque mon curseur est situé sur une div. Je ne sais pas comment faire cela, et je n'ai pas trouvé su Internet de solutions qui n'utilisaient pas JQuery. Si vous connaissez une alternative, je serais curieux de la connaitre. Merci d'avance.

Bonjour,

Tu peux utiliser addEventListener avec l'événement onmouseover sur ton élément div afin de déclencher une fonction lors du survol de cet élément, et utiliser clearInterval dans cette fonction afin d'arrêter l'exécution de la fonction déclenchée avec setInterval.

Un exemple simple (avec un <div id="mon-div"> en html) :

const intervalId = setInterval(function() {
	console.log('loop');
}, 1000);

document.getElementById('mon-div').addEventListener('mouseover', function() {
	console.log('stop');
	clearInterval(intervalId);
});

Du coup c'est moi qui ne comprend pas : le curseur, de toute manière, il faut bien l'emmener sur la div lorsque vous ouvrez la page, il ne s'y trouve pas positionné de base.

... à moins qu'il n'y ait déjà un focus déjà paramétré sur l'élément via javascript avec la fonction .focus(), dans ce cas :

element.addEventListener('focus', myFunction);

Modifié par Olivier C (30 Jun 2022 - 11:02)

Yuuno a écrit :
Bonjour,

Bonjour/bonsoir

Yuuno a écrit :
j'aimerais pouvoir arrêter un setInterval lorsque mon curseur est situé sur une div.

Peut tu préciser situé ? est ce au survol (entrant/sortant) ou au click, focus(clavier aussi?) ou un mix des uns et des autres ?
Sinon, un exemple visuel https://codepen.io/gc-nomade/pen/bGvNKmP
avec le code test suivant

let div= document.querySelector('#div');

div.addEventListener('focus', (event) => {
  clearInterval(montimer);  
});
div.addEventListener('mouseenter', (event) => {
  clearInterval(montimer);  
});
div.addEventListener('focusout', (event) => {
  setTimer();  
});
div.addEventListener('mouseout', (event) => {
  if(div != document.activeElement)   setTimer();  // seulement si il n'a pas le focus pour pas mettre le bins
});


function setTimer() {
  montimer = setInterval(function() {
    // ce que tu veut taïemé
    document.body.classList.toggle('bgcolor');// pour un test visuel
  }, 1000);
}
window.onload= setTimer;// sais pas quand tu veut qu'il se lance

une page mdn avec mouseout/mouseleave et setTimeout pour d'autres pistes https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event

cdt