11528 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Évènement click et navigateurs

Bonjour,

Je ne comprends pas parce que j'ai fait en sorte qu'un évènement click m'affiche bouton droit ou bouton milieu comme dans cette partie d'un

cours https://openclassrooms.com/fr/courses/3306901-creez-des-pages-web-interactives-avec-javascript/3545746-reagissez-a-des-evenements#/id/r-

3678973

Vous trouverez ci-joint mon code

Merci, bien cordialement Smiley smile 


<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Gestion des événements</title>
</head>
 
<body>
    <button id="bouton">Cliquez-moi !</button>
    <p id="para"> Un paragraphe avec un
    <button id="propa"> bouton </button> à l'intérieur </p>
    <p> Du temps à perdre ? <a id="interdit" href="https://9gag.com/"> Cliquez ici </a> </p>
 
    <script src="../js/cours.js"></script>
</body>
 
</html>



function clic() {
    console.log("Clic !");
}
 
var boutonElt = document.getElementById("bouton");
// Ajout d'un gestionnaire pour l'évènement click
boutonElt.addEventListener("click", clic);
 
/* syntaxe plus concise
var boutonElt = document.getElementById("bouton");
// Ajout d'un gestionnaire pour l'évènement click
boutonElt.addEventListener("click", function() {
    console.log("clic");
}) */
 
/* Pour que le clic sur le bouton ne soit plus géré par la fonction clic
// Suppression du gestionnaire pour l'évènement click
boutonElt.removeEventListener("click", clic); */
 
// Ajout d'un gestionnaire qui affiche le type et la cible de l'évènement
document.getElementById("bouton").addEventListener("click", function (e) {
    console.log("Evènement : " + e.type + ", texte de la cible : " + e.target.textContent);
});
 
// Gestion de l'appui sur une touche du clavier produisant un caractère
document.addEventListener("keypress", function (e) {
    console.log("Vous avez appuyé sur la touche " + String.fromCharCode(e.charCode));
});
 
// Affiche des informations sur un évènement clavier
function infosClavier(e) {
    console.log("Evènement clavier : " + e.type + ", touche : " + e.keyCode);
}
 
// Gestion de l'appui et du relâchement d'une touche du clavier
document.addEventListener("keydown", infosClavier);
document.addEventListener("keyup", infosClavier);
 
// Renvoie le nom du bouton souris à partir de son code
function getBoutonSouris(code) {
    var bouton = "inconnu";
    switch (code) {
        case 0: // 0 est le code du bouton gauche
            bouton = "gauche";
            break;
        case 1: // 1 est le code du bouton du milieu
            bouton = "milieu";
            break;
        case 2: // 2 est le code du bouton droit
            bouton = "droit";
            break;
    }
    return bouton;
}
 
// Affiche des informations sur un évènement souris
function infosSouris(e) {
    console.log("Evènement souris : " + e.type + ", bouton " + getBoutonSouris(e.button) + ", X : " + e.clientX + ", Y : " + e.clientY);
}
 
// Gestion du clic souris
document.addEventListener("click", infosSouris);
 
/* Gestion de l'appui et du relâchement d'un bouton de la souris
document.addEventListener("mousedown", infosSouris);
document.addEventListener("mouseup", infosSouris); */
 
// Gestion de la fin du chargement de la page web
window.addEventListener("load", function () {
    console.log("Page chargée grâce à Aurélien");
});
 
// Gestion de la fermeture de la page web
window.addEventListener("beforeunload", function (e) {
    var message = "Wesh le zeh";
    e.returnValue = message; // Provoque une demande de confirmation (standard)
    return message; // Provoque une demande de confirmation (certains navigateurs)
});
// Gestion du clic sur le document
document.addEventListener("click", function () {
    console.log("Gestionnaire document");
});
 
// Gestion du clic sur le paragraphe
document.getElementById("para").addEventListener("click", function () {
    console.log("Gestionnaire paragraphe");
});
// Gestion du clic sur le bouton
document.getElementById("propa").addEventListener("click", function (e) {
    console.log("Gestionnaire bouton");
});
 
// Gestion du clic sur le bouton
document.getElementById("propa").addEventListener("click", function (e) {
    console.log("Gestionnaire bouton");
    e.stopPropagation(); // Arrêt de la propagation de l'évènement
});
 
// Gestion du clic sur le lien interdit
document.getElementById("interdit").addEventListener("click", function (e) {
    console.log("Continuez plutôt à lire le cours [cligne]");
    e.preventDefault(); // Annulation de la navigation vers la cible du lien
});

Modifié par Pingu1 (05 Jan 2021 - 17:18)
Modérateur
Salut Pingu1,

Je t'avoue avoir rien compris à ton souci. Au passage, merci de faire attention à la mise en forme de ton message. Là, je viens de rééditer ton message.
Bonjour Niuxe,

Qu'est-ce que vous n'avez pas compris ?

Quelle(s) modification(s) avez-vous apporté à mon message ?

Merci

:)
Modérateur
Pingu1 a écrit :

Qu'est-ce que vous n'avez pas compris ?

Ce que tu cherches à faire et là où tu coinces. Je n’ai pas vraiment envie de lire le tuto....
Pingu1 a écrit :

Quelle(s) modification(s) avez-vous apporté à mon message ?


la mise en forme du message. L'intention était là mais c'était mal édité. Ce qui rendait le code encore moins lisible.
exemple :

console.log('bla')
Bonjour Niuxe,

Je cherche à faire en sorte que la console m'affiche bouton droit et bouton milieu après un évènement click sans utiliser mousedown mouseup

Merci Smiley smile
Sujet clos
Aller à