Clic droit personnalisé JavaScript

Abonne-toi à la NewsLetter pour recevoir des tas d'infos sur le développement web :
mailchi.mp/94d...
Le lien du Discord : / discord
Tu veux apprendre les technologies du web ? C'est par ici :
www.ecole-du-w...
-7% sur ton prochain hébergement avec le code "enzo" :
www.hostg.xyz/...
Je suis aussi sur la plateforme Tuto.com :
fr.tuto.com/fo...
Et sur Udemy :
www.udemy.com/...
Abonne-toi à ma chaîne :
/ @ecoleduweb
Suis-moi sur Twitter :
/ ledesignerduweb
Si tu veux que je fasse des vidéos sur certains sujets dis le moi!
-----------------------------------------------------------------------------------------

[@thomasfawkes5440]

C'est ce que j'aime sur ta chaine, outre le fait que tes explications sont toujours très précises, je découvre des fonctionnalités et des petites astuces comme celle-ci très sympa. Merci ;)

[@EcoleduWeb]

Et c'est ce que j'adore montrer même si je ne fais pas des millions de vues :)

[@cerisen]

Quel belle trouvaille Merci Enzo

[@adrienlecoq9067]

Super video. C'est super claire. Je ne connaissais pas du tout le click comme ca.

[@rocramos6091]

Toujours aussi intéressant

[@prtxine6667]

Explication toujours au top!!! depuis que je t'ai découvert chaque soir la premiere chose que je regarde c'est si tu as sorti une nouvelle video

[@Phenixelle]

Super précis ! Merci beaucoup 👍

[@walid1717]

Genial, super astuce, je ne connaissais pas, je commente pas souvent mais je suis chacune de tes video, un grand merci pour tout ton travail

[@electronpositron7005]

Merci Enzo c'est carrément génial ! 👍👍

[@baptistebidaux]

Super sympa, je ne savais même pas que c’était possible !

[@mohamednassim6709]

Thanks

[@cedhyuga91]

Super tuto, simple et efficace !!

[@wivon]

si vous voulez que le menu du clique droit ne dépasse pas de la page vous pouvez modifier votre code :
if (e.clientY < (document.body.clientHeight - votremenu.offsetHeight) && e.clientX < (document.body.clientWidth - votremenu.offsetWidth)) {
votremenu.style.display = "flex";
votremenu.style.top = e.clientY + "px";
votremenu.style.left = e.clientX + "px";
}
else {
votremenu.style.display = "flex";
votremenu.style.top = (e.clientY - ContextMenu.offsetHeight) + "px";
votremenu.style.left = (e.clientX - ContextMenu.offsetWidth) + "px";
}
la vérification permet de vérifier si le menu du clique droit est plus grand que l'espace qu'il y a avant que ça sorte de la page si non ça décale la menu du clique droit de sa propre taille en hauteur et largeur (je sais pas si c'est clair)

[@EcoleduWeb]

Bonne proposition en effet :).
On peut aussi utiliser overflow-x: hidden en CSS.

[@music-4-ever704]

Génial ! Je sens que ça va me servir !!!
Petite question en passant : est-il possible de garder le menu contextuel de base, mais d'y ajouter ses propres fonctionnalités ?

[@EcoleduWeb]

Je ne crois pas :)

[@livin10paris]

Top ! petite question, serait-ce mieux pour les perfs de se baser sur const menuPerso pour cibler les boutons ? en faisant un truc comme : const btn1 = menuPerso.querySelector(".btn1") (histoire de profiter de la déclaration de menuPerso et de ne pas repasser par tout le document pour cibler les enfants de menuPerso)

[@EcoleduWeb]

Les sélecteurs sont ultra rapides, que tu passes tout le document ou pas c'est fait quasi instantanément ;)

[@rachiid0074]

Salut Pk tu utilise un querySelector() alors que tu peut utiliser getElementByClassName() ??
J'imagine qu'il est plus optimisé pour travailler avec querySelector() ou je me trompe ?

[@EcoleduWeb]

Tu imagines bien ;)
QuerySelector permet de tout sélectionner, des classes aux éléments html.
Plus besoin de s'embeter à choisir un autre sélecteur.

[@isabellegautier1936]

Super sympa.
Une question. Si on ajoute une couleur en Hexa est-il nécessaire de la mettre en guillemets ou non ? J'ai testé... les 2 fonctionnent. Mais que disent les bonnes pratiques ?

[@EcoleduWeb]

Merci Isabelle, en JS on peut utiliser les guillemets/apostrophes/backticks.

[@Louis-zq3ft]

Très bonne vidéo,très peu de montage