Discussion :

[Elinyhs]

Bonjour à tous,

Si on considère le code simplifié suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span style="cursor:pointer" onclick="alert(1);">Ceci est un <span style="cursor:pointer" onclick="alert(2);">test</span>.</span>

Lorsqu'on clique sur "Ceci est un", "1" s'affiche.
Par contre, quand on clique sur "test", "2" s'affiche puis "1".
Est-il possible de faire en sorte pour ce dernier cas qu'uniquement "2" s'affiche ?

Précision : je travaille uniquement sur Firefox 3.

Merci !

[Bovino]

Il faut stopper la propagation de l'événement, via le paramètre event passé en paramètre de la fonction anonyme sous Firefox ou l'objet window.event sous IE :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span onclick="alert(1);" style="cursor: pointer;">Ceci est un <span onclick="alert(2);event.stopPropagation ? event.stopPropagation() : event.cancelBubble" style="cursor: pointer;">test</span>.</span>

[Elinyhs]

Merci Bovino !
J'avais trouvé de la doc sur la fonction stopPropagation, mais j'arrivais pas à l'appliquer dans le cas présenté au dessus : là c'est parfait !

[Bovino]

Merci Bovino !
J'avais trouvé de la doc sur la fonction stopPropagation, mais j'arrivais pas à l'appliquer dans le cas présenté au dessus : là c'est parfait !

Ce qu'il faut savoir, c'est qu'un attribut du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="..."

en HTML crée en fait une fonction anonyme du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

HTMLElement.onclick = function(event){...}

sauf bien sûr pour IE pour qui event est un objet global, mais comme window est toujours implicite (car objet de plus haut niveau), event est toujours défini dans la fonction