stopPropagation() et firefox [Résolu]

[nclsbiz]

Bonjour,

J'ai deux div imbriquée avec chacune un évènement onClick différent le problème c'est que lorsque l’on clique sur la div la plus au dessus les deux fonction de chaque div sont exécutées j'ai donc trouvé la solution stopPropagation() te cancelBubble qui fontionne très bien pour tout les autres navigateurs mais impossible de le faire fonctionner sur firefox!!

Mon code :

Code :

1
2
3
4
5
6
7
8
 
function modifier_produit(){
        alert('modifier');
if (event.stopPropagation){ 
        event.stopPropagation(); 
                          } 
event.cancelBubble = true;
                           }

Merci de votre aide

[NoSmoking]

Bonjour,
- FireFox n'implémente pas d'objet event, particularité de IExplorer, il te faut passer event en paramètre à la fonction au minimum.

Code :

1
2
3
4
5
6
7
8
9
10
11
function CancelEvent(e){
  if( e){
    e.stopPropagation();
    e.preventDefault();
  }
  if( window.event){
    window.event.cancelBubble = true;
    window.event.returnValue  = false;
    return;
  }
}

- stopPropagation est W3C et cancelBubble IE.
Une page très instructive Présentation des évènements du DOM

[nclsbiz]

Merci mais je n'arrive pas a le faire fonctionner, j'ai fait comme ceci :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
function modifier_produit(e){
        alert('modifier');
  if( e){
    e.stopPropagation();
    e.preventDefault();
  }
  if( window.event){
    window.event.cancelBubble = true;
    window.event.returnValue  = false;
    return;
  }
}

et mon code qui appel la fonction est :

Code :

1
2
 
echo'<div class="modifier"><img src="logo/modify.png" onMouseOver="change_modifier(this.id)" onMouseOut="remet_modifier(this.id)" onClick="modifier_produit()" id="modif'.$resultat->id.'" class="bouton_modif"></div>';

Mais la fonction de la div du dessous est toujours appelée!

[mekal]

Code :

onClick="modifier_produit(event)"

[NoSmoking]

en complément de ce qu'a écrit mekal tu ne peux pas faire l'appel en direct dans la balise et utiliser le e en direct.
Il te faut dans ce cas tester l'existence de la méthode.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function modifier_produit(e){
  var sMsg = e.stopPropagation ? "W3C" : "IExplorer";
  alert( sMsg);
 
  // stop la propagation
  if( e.stopPropagation){
    e.stopPropagation();
    e.preventDefault();
  }
  if( window.event){
    window.event.cancelBubble = true;
    window.event.returnValue  = false;
    return;
  }
}

testes avec

Code html :

1
2
3
4
5
6
7
8
<div class = "modifier" onclick = "alert( this.tagName);">
  <img src = "logo/modify.png"
    id = "modif"
    class = "bouton_modif"
    onmouseover = "change_modifier(this.id)"
    onmouseout = "remet_modifier(this.id)"
    onclick = "modifier_produit(event);">
</div>

par exemple

[Auteur]

Je déterre de vieilles discussions
http://www.developpez.net/forums/d68...oppropagation/

http://www.developpez.net/forums/d57...circuiter-1-a/

[nclsbiz]

Ca fonctionne enfin !

Un grand merci a vous