Calcul dynamique window.matchMedia pour conditionner addEventListener ('click', function())

Bonjour,


J'ai deux problèmes.

1)

Code:

---

var mobile = window.matchMedia ('(min-width: 768px)');

---

Je veux calculer la valeur au chargement de la page et au resize de la fenêtre.

2)

Selon la valeur dynamique de mobile je veux activer-désactiver un addEventListener ('click', function())

J'ai illustré la question avec un codepen.

Il fonctionne au chargement mais pas au resize.

Merci d'avance.

essaye en ajoutant un listener sur le resize ...

Code:

---

window.addEventListener('resize', maFonctionSurResize);

---

J'ai vu ta tentative sur le codepen ...

mobile est un objet dont il faut tester le matches ...

Code:

---

1 2 3 4 5 6 7

window.addEventListener ('resize', function() {   mobile = window.matchMedia ('(min-width: 768px)'); console.log( mobile.matches? "Desktop":"Mobile" ); } );

---

pour la modif de couleur sur le clcik :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

const test = document.getElementById ('test');   mobile = window.matchMedia ('(min-width: 768px)');     window.addEventListener ('resize', function() { mobile = window.matchMedia ('(min-width: 768px)');   } );     if (mobile.matches) { test.addEventListener ('click', function() { if (test.style.color=='blue') test.style.color='red'; else test.style.color='blue'; }); }

---

Bonjour SpaceFrog,

Merci pour ton suivi.

je teste ce soir.

Je te tiens informé.

Bonjour,

attention à ce genre de test :

Code:

---

1 2 3 4

if (test.style.color=='blue') test.style.color='red'; else test.style.color='blue';

---

il ne fonctionnera que si tu as écris :

Code:

---

<element style="color:blue"></element>

---

... mais pas si tu passes par une feuille de style ou une déclaration entre balise <style></style>.

Bonjour SpaceFrog,

J'ai fait un rapide copier-coller de ton code dans mon codepen mais le résultat n'est pas au rendez-vous.

Bonjour NoSmoking,

J'ai fait pour le test la changement demandé.
Dans la vraie vie mon problème n'est pas de changer une couleur mais de bloquer une fonction qui en gros au click ouvre un pop-up..

J"ai testé le premier code et j'ai bien mobile ou desktop en console ...

Bonjour SpaceFrog,

D'accord mais tu vois que sur le codepen le résultat n'est pas celui attendu.

J'attends que la fonction de changement de couleur au clic soit désactivée dès que le resize passe en dessous de 768px, et réactivée dès que l'on passe au-dessus.

Actuellement la largeur est reconnue au chargement de la page mais pas au resize.

Oui simplement parceque le onclick reste attribué ...

Change de stratégie n'essaye pas d'ajouter ou supprimer le onclick modifie un flag sur le onresize
et teste le en debut de fonction ... fais un return false selon le cas pour ne pas

Dans l'idée un truc comme ça


le fonction de changement de couleur

Code:

---

1 2 3 4 5 6

function changecolor(){ if (!mobile.matches){ return false,} // test du format et sortie de fonction si pas le bon format // ici le changement de couleur .../... }

---

l'attribution du onclick (quelque soit le format )

Code:

---

1 2	const test = document.getElementById ('test'); test.addEventListener ('click', changecolor)

---

initialisation de mobile

Code:

---

1 2	var mobile = window.matchMedia ('(min-width: 768px)');

---

rafraichissement de mobile sur le resize

Code:

---

1 2 3 4

window.addEventListener ('resize', function(){ mobile = window.matchMedia ('(min-width: 768px)'); });

---

Merci de ton suivi.

Je fais le test ce soir.

Je vous tiens informés.

Bonjour SpaceFrogm

Copier-coller de ton code dans le codepen, j'ai juste un peu changé l'ordre, fonctionnement attendu.

MERCI beaucoup.

J'attends de transposer dans la vie réelle avant de cocher Résolu.

Par ailleurs, je ne comprendrai jamais Javascript.

Code:

---

1 2 3 4 5 6 7 8

function changecolor(){ if (!mobile.matches) {return false; } else { if (test.style.color=='blue') test.style.color='red'; else test.style.color='blue'; } }

---

Comment les deux variables mobile et test définies hors de la fonction peuvent-elles y entrer ?

J'aurais cru devoir faire :

Code:

---

1 2 3 4

function changecolor (test, mobile) { etc... }

---

les variables sont initialisée en dehors de la fonction et sont donc "globales"

d'après un test que je viens de réaliser, le refresh de

Code:

---

mobile = window.matchMedia ('(min-width: 768px)');

---

sur le resize ne serait pas utile:
https://jsfiddle.net/e358bxLw/

Il semble que la variable se rafraichit toute seule l'affectation se fait par référence ?

Bonjour SpaceFrog,

Encore merci pour ton suivi, je regarde cela ce soir.

Hello SpaceFrog,

Tu as raison, dans le codepen j'ai supprimé le window.addEventListener ('resize', function()) et cela continue à marcher comme avant.

Pour ma gouverne la valeur de mobile est recalculée dans la fonction Changecolor ?

if (!mobile.matches) impose un calcul ?

Comme dit, en début de script tu définis :

Code:

---

const Mobile = window.matchMedia ('(min-width: 768px)');

---

puis tu ne t'en occupes plus, lorsque la largeur du viewport sera inférieure à 768px Mobile.matches vaudra false, dans le cas contraire ta variable vaudra true sans que tu rien à faire.

Il te suffit donc de prendre cela en compte dans la fonction déclenchée sur le clic.

Code:

---

1 2 3 4 5 6 7 8

element.addEventListener("click", (e) => { if (Mobile.matches) { // grand écran } else { // petit écran } });

---

Tu pourrais même mettre un gestionnaire directement sur cette variable

Code:

---

1 2 3

Mobile.addEventListener ("change", () => { console.log(Mobile.matches); });

---

Bonjour NoSmoking,

Merci de tes précisions.

J'ai installé le code en production.

Fonctionnement parfait, fluide, même sous IE, parfaitement synchronisé avec les media-queries CSS.

Merci encore de votre aide.