Propagation d'événements

[Sephi-Chan]

Bonjour,

J'ai un souci avec la propagation d'événements.

J'ai une carte avec des territoires (ce sont des balises div avec une classe territory) et, lorsque l'on clique sur l'un d'eux, je crées des marques d'interactions (visuellement, des flèches qui pointent vers les territoires voisins, d'une couleur verte si le territoire pointé est allié, rouge sinon).

Mon but est de lancer un événement quand on clique sur l'une de ses marques. Ça fonctionne bien. Le problème, c'est que le clic est propagé à l'élément territory, ce que je ne souhaite pas faire. Le problème, c'est que je n'arrive pas à empêcher cette propagation (avec event.stopPropagation(), ou même return false).


Voici le HTML :

<div class="territory" id="territory-france" data-identifier="france" data-name="France" data-owner="blue" data-refresh="yes"

     data-territory-url="http://bugspirit.dev:8080/games/2492ef102c70012d5888549a20d084ed/territories/5">

  <div class="interaction-mark interaction-mark-ally" id="interaction-mark-11"></div>

  <div class="interaction-mark interaction-mark-enemy" id="interaction-mark-12"></div>

  <div class="interaction-mark interaction-mark-enemy" id="interaction-mark-13"></div>

  <div class="interaction-mark interaction-mark-enemy" id="interaction-mark-14"></div>

  <div class="interaction-mark interaction-mark-ally" id="interaction-mark-15"></div>

</div>

Et le Javascript :

$('.territory').bind('click', function(event){

  log('Territory "' + $(this).attr('data-name') + '" was clicked!');

  

  $.ajax({

    url:      $(this).attr('data-territory-url') + '.js',

    type:     'GET',

    dataType: 'script'

  });

});



$('.interaction-mark').live('click', function(event){

  log("Interaction mark clicked!");

  

  event.stopPropagation();

});

Pourquoi le click est-il propagé au territoire ?

Merci d'avance et bonne journée !


Sephi-Chan

[Anthor]

Sephi, peux tu me faire un fichier complet, et je te test ça

[Anthor]

De mémoire, sans garanti, j'aurais plutôt eu tendance, à passer le live dans l'autre sens :

Code PHP :

<?php 

$('.territory').bind('click', function(event){

  log('Territory "' + $(this).attr('data-name') + '" was clicked!');

 

  $.ajax({

    url:      $(this).attr('data-territory-url') + '.js',

    type:     'GET',

    dataType: 'script'

  });

});

 

$('.territory').live('click', function(event){

  if( $(event.target).is('.interaction-mark') )

  {

    log("Interaction mark clicked!");



  }

}); 

[Sephi-Chan]

Comme c'est un peu chiant à exporter, j'ouvre la porte de l'application en développement. http://sephichan.homelinux.net:8080/.
Il faut se connecter avec les identifiants 'tribes.romain_AT_gmail.com' (en remplaçant bien sur le _AT_) et le mot de passe 'vexa'.

Ensuite, il faut cliquer choisir la partie 1 et cliquer sur un territoire parmi l'Allemagne, la Suisse ou l'Italie.

Edit : j'ai testé ta solution, mais l'événement est toujours propagé au territoire. Je sais bien que c'est le comportement normal, mais c'est bien pour ça que je cherche à l'empêcher par un stopPropagation().


Sephi-Chan

[Anthor]

Essai avec stopImmediatePropagation sinon. Et avec un target dans la première fonction aussi.

[Argorate]

perso il ne se passe rien, peut importe sur le pays sur lequel je click... mais peut être que tu fais des modifs c'est peut être pour ça

[Anthor]

J'ai dû actualiser aussi 2/3 fois avant que ça fonctionne.

[Argorate]

moue, ça marche tjs pas

j'ai tenter d'en créer une nouvelle, mais il me dit "en attente de d'autres joueurs" me suis fait avoir^^

[php_addict]

perso il ne se passe rien, peut importe sur le pays sur lequel je click... mais peut être que tu fais des modifs c'est peut être pour ça

car tu utilise firefox, avec chrome ca fonctionne.

[Argorate]

J'ai essayé IE, c'est pareil... par contre j'ai pas essayé autre chose.