/!\ Note importante: quand je parle de lire un tuto, je ne parle pas juste de le zieuter, ni de faire tous les exercices qu'il contient. Je parle de le lire, tranquillement, et surtout de prendre des notes (un papier, c'est bien plus efficace qu'un Word) sur les points qui te semblent utiles de retenir. Par exemple, "CSS selector: :not() inverser un sélecteur" c'est bien à noter quand on le découvre (après, tu le reprendras tes notes dans 2-3 mois et tu vireras les trucs que t'as retenus).
On s'en fout de récupérer l'ID du truc cliqué dans l'event listener. Le principe est ici d'appliquer un event listener à l'élément HTML qui est cliquable, directement (sinon, t'imagines le bordel? S'il te faut 60 IFs car tu as 60 éléments pouvant être cliqués?!). N'hésite pas à lire le guide complet du MDN sur les events https://developer.mozilla.org/en-US/docs...cks/Events cela peut t'aider à saisir leur fonctionnement (JS est une horreur si tu pars sur de mauvaise bases et habitudes, mais devient un plaisir simple si assimile sa "philosophie" de fonctionnement).
.menu:not(.opened) est simplement une combinaison de sélecteurs CSS https://developer.mozilla.org/en-US/docs.../Selectors Fais le tour des 4 articles sur les sélecteurs (sans forcément l'apprendre par coeur).
Evite de laisser comme ça: ça va te traîner dans les pattes, tu pèteras un plomb quand il faudra modifier du styling (car ton fichu JS ira définir des attributs "style" sur les éléments, que le CSS ne pourra plus écraser) et cela va te pousser à continuer de faire de même. Là, t'en as pour même pas 5 minutes à déplacer les règles dans du CSS et à appliquer/supprimer une classe dans ton JS.
Tu n'as pas à faire la conversion width/height maintenant. C'était effectivement très con de te baser sur la hauteur (le web a pris la décision, logique au fond, de considérer la largeur comme à peu près connue et de laisser la hauteur des pages libres). Mais tu peux tout à faire utiliser la hauteur dans tes media queries https://developer.mozilla.org/en-US/docs...Pseudo-BNF Fais donc en deux temps: dégage tes stylings du JS et fous-les en CSS, puis plus tard, tu changeras le CSS pour basculer de width à height
Touchstart, c'était pour l'exemple, mais t'as déjà tout dans la démo que j'avais faite: https://xenos.reinom.com/jeuweb/contextmenu-event.html contextmenu marche très bien sur mobile (FF en tous cas, à voir sur webkit? mais je doute que ce soit différent). C'est au navigateur de faire le distingo entre un appuis long pour le menu et un appuis court qui trigger le click event.
J'ai rien compris à la question de ton edit.
Tu as un mobile, donc pourquoi ne pas tester directement dessus? C'est bien plus simple. (éventuellement, je peux intégrer la méthodologie pour le faire à un article existant si tu coinces là dessus).
[PS] J'ai l'impression de faire de la Pull request ^^ Ne t'arrêtes pas à l'éventuel ton du post, c'est l'habitude du boulot :/
On s'en fout de récupérer l'ID du truc cliqué dans l'event listener. Le principe est ici d'appliquer un event listener à l'élément HTML qui est cliquable, directement (sinon, t'imagines le bordel? S'il te faut 60 IFs car tu as 60 éléments pouvant être cliqués?!). N'hésite pas à lire le guide complet du MDN sur les events https://developer.mozilla.org/en-US/docs...cks/Events cela peut t'aider à saisir leur fonctionnement (JS est une horreur si tu pars sur de mauvaise bases et habitudes, mais devient un plaisir simple si assimile sa "philosophie" de fonctionnement).
.menu:not(.opened) est simplement une combinaison de sélecteurs CSS https://developer.mozilla.org/en-US/docs.../Selectors Fais le tour des 4 articles sur les sélecteurs (sans forcément l'apprendre par coeur).
Evite de laisser comme ça: ça va te traîner dans les pattes, tu pèteras un plomb quand il faudra modifier du styling (car ton fichu JS ira définir des attributs "style" sur les éléments, que le CSS ne pourra plus écraser) et cela va te pousser à continuer de faire de même. Là, t'en as pour même pas 5 minutes à déplacer les règles dans du CSS et à appliquer/supprimer une classe dans ton JS.
Tu n'as pas à faire la conversion width/height maintenant. C'était effectivement très con de te baser sur la hauteur (le web a pris la décision, logique au fond, de considérer la largeur comme à peu près connue et de laisser la hauteur des pages libres). Mais tu peux tout à faire utiliser la hauteur dans tes media queries https://developer.mozilla.org/en-US/docs...Pseudo-BNF Fais donc en deux temps: dégage tes stylings du JS et fous-les en CSS, puis plus tard, tu changeras le CSS pour basculer de width à height
Touchstart, c'était pour l'exemple, mais t'as déjà tout dans la démo que j'avais faite: https://xenos.reinom.com/jeuweb/contextmenu-event.html contextmenu marche très bien sur mobile (FF en tous cas, à voir sur webkit? mais je doute que ce soit différent). C'est au navigateur de faire le distingo entre un appuis long pour le menu et un appuis court qui trigger le click event.
J'ai rien compris à la question de ton edit.
Tu as un mobile, donc pourquoi ne pas tester directement dessus? C'est bien plus simple. (éventuellement, je peux intégrer la méthodologie pour le faire à un article existant si tu coinces là dessus).
[PS] J'ai l'impression de faire de la Pull request ^^ Ne t'arrêtes pas à l'éventuel ton du post, c'est l'habitude du boulot :/