11485 sujets

JavaScript, DOM et API Web HTML5

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);
});
Le problème avec cette méthode, c'est que le curseur est détecté uniquement si il est en mouvement.
Modifié par Yuuno (29 Jun 2022 - 13:41)
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)
Modérateur
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