11521 sujets

JavaScript, DOM et API Web HTML5

Execution & propagation de fonctions

Hello

J'ai deux fonctions JS, une qui effectue des évènements sur un menu desktop, et une autre qui effectue des évènements sur un menu mobile.

Via window.matchMedia().matches) , j'initialise ces deux fonctions au chargement et au redimensionnement de ma fenêtre. Grossomodo j'arrive à ceci :


function check_responsive_menu() {
   if (window.matchMedia("(min-width:992px)").matches) { 
      desktop_menu();
   }

   if (window.matchMedia("(max-width:991px)").matches) {      
      mobile_menu();
   } 
}
//ecouteurs 
$(window).on('load resize', function () {
   check_responsive_menu();
});


Mon problème c'est que mes fonctions continuent de s'exécuter et se "mélangent" peu importe le redimensionnement, sachant que dans ces deux fonctions je cible des éléments du dom similaires, mais pourtant avec des classes différentes.

Est-ce que vous auriez une piste ? Merci Smiley cligne
Y'a pas de raison que la fonction activée avant le resize s'arrête de fonctionner après ce resize. Du coup les deux fonctionnent alors en même temps...
Ca peut peut être marcher en condition réelle sans changement de taille (mais il ne faut pas changer l'orientation du téléphone).
Il faudrait que l'activation d'une fonction désactive l'autre.
Merci pour ta réponse, effectivement c'est exactement ce qu'il se passe, comment faire pour activer/desactiver une fonction ? Si je la mlet dans une variable et que je lui attribvue la valeur null c'est bon, mais au resize inverse elle restera désactivée. J'ai exploré cette piste mais je ne sais pas comment relancer la fonction vu qu'elle n'existe plus.
Peut être un truc comme ça :
function check_responsive_menu() {
   if (window.matchMedia("(min-width:992px)").matches) { 
     function desktop_menu() { 
     //definition de ta fonction desktop_menu
     }
     desktop_menu();
     function mobile_menu() {};
    mobile_menu();
 }

   if (window.matchMedia("(max-width:991px)").matches) {      
      function mobile_menu() { 
     //definition de ta fonction mobile_menu
     }
      mobile_menu();
   function desktop_menu() {};
   desktop_menu();
 } 
}


Pas sûr que ça marche ; c'est assez tordu...

J'ai quand même un gros doute sur le fait que les choses lancées la première fois par la fonction s'arrêtent parque la fonction à été redéfinie.
ou peut-être plutôt ?


function check_responsive_menu() {
   if (window.matchMedia("(min-width:992px)").matches) { 
     var desktop_menu = function() { 
     //definition de ta fonction desktop_menu
     }
    mobile_menu = null;
 }

   if (window.matchMedia("(max-width:991px)").matches) {      
      var mobile_menu =  function () { 
     //definition de ta fonction mobile_menu
     }
     desktop_menu = null
 } 
}
Tu as fait des essais ?

En fait on ne sait pas ce qu'il y a dans tes deux fonctions.
Si par exemple il y des eventListener, je ne pense pas qu'ils vont s'arrêter comme ça...
En fait il faudrait que check_responsive_menu() s'execute non pas au resize mais au click sur ton menu (eventlistener) ; et alors le choix entre les deux actions possibles se feraient selon la largeur d'écran...
Modifié par kerlutinoec (13 Jul 2022 - 10:59)
Hello,

en fait ma méthode est mauvaise...
j'ai effectivement des écouteurs dans mes deux fonctions et sur les mêmes éléments du dom, mais sur des actions différentes ('mouseenter' + 'mouseleave' en desktop qui interagissent avec d'autres elements, et 'click touch' en mobile'), je pointais donc mes éléments mais avec des classes différentes, tellement persuadé que les écouteurs feraient la différence. Mais en fait pas du tout...

J'ai donc conservé ce que j'ai fait, j'ai juste joué avec des bind() & unbind() sur mes écouteurs, et tout fonctionne parfaitement. Du coup au resize ma fonction check_responsive_menu() fais bien le travail.

Je fais ça car mes deux menus ont vraiment des comportements différents selon le support, c'est une sorte de "mega menu", et de plus il faut que cela fonctionne aussi quand on "s'amuse" à resize la fenêtre, pas juste au load de la page.
Modifié par Pedrothelion (15 Jul 2022 - 20:02)
Meilleure solution
Sujet clos
Aller à