Annuler event clic sur le parent sur clic sur element enfant

Version imprimable

Bonjour à tous et bonnes fêtes de fin d'année!
Je commence en JQuery (et en plus je suis limité à la version 1.10.2 pour des raisons d'infra) et je me retrouve avec un problème qui me rend chèvre...
J'ai un DIV d'entête sur lequel je peux cliquer pour ouvrir ou fermer la section en dessous et sur ce DIV d'entête, j'ai rajouté un img sur lequel je clic pour lancer une fonction Js ouvrant un popup.

Code:

1
2
3
4
5
6
7
8
9
                                            <div id="CollapsiblePanel_SiteGeo_<%=nb_site_geo%>" class="CollapsiblePanel">
                                                <div id="CollapsiblePanelTab_SiteGeo_<%=nb_site_geo%>" class="CollapsiblePanelTab_SiteGeo_detail" tabindex="0" style="font-size:12px;">
                                                <table width="100%">
                                                	<tr>
                                                   	  <td><img src="../images/fleche_coudee_b.png" height="8" /><%=nb_site_geo%> - <%=Res_site_geo(1)%> <img src="../images/folder.png" height="20" onclick="lance_explorateur_sitegeo('<%=Res_site_geo(1)%>', '<%=nb_site_geo%>', event);" />
                                                       &nbsp;</td>
	                                                </tr>
                                                </table>
                                                </div>

Le problème c'est que quand je clic sur mon img, l'event se propage jusqu'au DIV d'entête et ouvre ou ferme le div du dessous en même temps.
J'ai donc essayé de bloquer la propagation par défaut (ça ça fonctionne) mais par contre une fois le popup ouvert, je ne peux plus ouvrir ou fermer la section du dessous en cliquant sur le div d'entête!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
	function lance_explorateur_sitegeo(valeur, nb_site_geo, e) {
		$("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).unbind();
		$("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).click(function(e){
			e.stopImmediatePropagation();
		});
 
		//ouverture du popup
 
		$("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).bind("click", function() {
		  $("#Panel_SiteGeo_"+nb_site_geo).slideToggle( "fast" );
		});
	}

Une idée ou une autre approche à me proposer ? (autre que de déplacer l'ouverture / fermeture du DIV ailleurs que sur le DIV d'entête ^^)

Merci d'avance!

Bonjour,
modifie la logique de ton code

Code:

1
2
3
4
5
function lance_explorateur_sitegeo(valeur, nb_site_geo, e) {
  // on ne va pas plus loin dans l'arbre
  e.stopPropagation();
  // là tu mets le code de ta fonction();
});

et en dehors de celle-ci

Code:

1
2
3
$("#CollapsiblePanelTab_SiteGeo").on("click", function() {
  $("#Panel_SiteGeo_" + nb_site_geo).slideToggle("fast");
});

28/12/2018, 14h42
Metal29

Bonjour,

Désolé je n'ai pas recu de notif pour me prévenir de la réponse...

En fait le 2ème extrait du code je l'ai déjà initialisé dans ma page. C'est juste que le fait de faire un unbind me force à réinplémenter la fonction suite à l'action...

Et si je ne fais qu'un e.stopPropagation() et donc pas d'unbind, ça n'arrête pas le traitement de réduction de la zone...

Merci d'avance et encore désolé pour le délais de réponse!
29/12/2018, 11h15
NoSmoking

Citation:

... ça n'arrête pas le traitement de réduction de la zone...

si j'ai bien compris, regarde du côté de jQuery.stop() avant de lancer ton animation.
07/01/2019, 15h37
Metal29
Meilleurs voeux à tous.
De retour de vacances je reprends le dossier...
J'ai essayé de mettre un stop() sur mon début de fonction mais sans succès:
Code:

1 2 3 4 5 function lance_explorateur_sitegeo(valeur, nb_site_geo, e) { $("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).stop(); //ouverture du popup }
L'animation se poursuit toujours...
J'ai essayé avec

Code:

$("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).stop(true, true);

même résultat...
07/01/2019, 17h54
Toufik83

Salut,
il est ou ton élément ayant l'id commençant par #Panel_SiteGeo_ dans ton code html ?

le mieux est de faire un (CTRL+U) et montre nous le code source html généré de la page.

Ca va être compliqué étant donné que le source rend dans les 3000 lignes et que le contenu est confidentiel...
Mais en version très très épurée ça donnerait ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../lib/jquery-1.10.2.js"></script>
<script language="javascript">
	function lance_explorateur_sitegeo(valeur, nb_site_geo, e) {
		$("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).unbind();
 		$("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).click(function(e){
			e.stopImmediatePropagation();
		});
		$("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).stop(true, true);
 
               //traitement du popup
 
		$("#CollapsiblePanelTab_SiteGeo_"+nb_site_geo).bind("click", function() {
		  $("#Panel_SiteGeo_"+nb_site_geo).slideToggle( "fast" );
		});
	}
</script>
</head>
<body background="../images/wp.gif" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
 
                    <div id="CollapsiblePanel_SiteGeo" class="CollapsiblePanel">
                        <div id="CollapsiblePanelTab_SiteGeo" class="CollapsiblePanelTab_SiteGeo" tabindex="0" style="font-size:12px;">Site(s) Géographique(s)</div>
                        <div id="Panel_SiteGeo" class="CollapsiblePanelOpen_SiteGeo Est_Reductible" style="padding-left:10px;">
                            <table width="100%">
                                <tr>
                                    <td>
 
                                            <div id="CollapsiblePanel_SiteGeo_1" class="CollapsiblePanel">
                                                <div id="CollapsiblePanelTab_SiteGeo_1" class="CollapsiblePanelTab_SiteGeo_detail" tabindex="0" style="font-size:12px;">
                                                <table width="100%">
                                                	<tr>
                                                   	  <td><img src="../images/fleche_coudee_b.png" height="8" />1 - Toto <img src="../images/folder.png" height="20" title="DOSSIER SOCIETE" align="absmiddle" onclick="lance_explorateur_sitegeo('toto', '1', event);" />
                                                       &nbsp;</td>
	                                                    <td align="right">&nbsp;</td>
	                                                </tr>
                                                </table>
                                                </div>
                                                <div id="Panel_SiteGeo_1" class="CollapsiblePanelOpen_SiteGeo_detail Est_Reductible" style="padding-left:10px;">
 
 
														//Contenu
 
 
                                                 </div>
                                            </div>
									  		<script>
                                            $( "#CollapsiblePanelTab_SiteGeo_1" ).click(function() {
                                              $( "#Panel_SiteGeo_1" ).slideToggle( "fast" );
                                            });
                                            </script>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
</body>
</html>

a vrai dire, tu as compliqué la tâche avec les id, a mon avis il faut utiliser des classes au lieu de s'embrouiller avec les id mais bon...

enlève l'attribut onclick sur l'image en question, supprime la fonction lance_explorateur_sitegeo, et écris ce code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $(document).ready(function(e){ //clique sur le div parent $("#CollapsiblePanel_SiteGeo").click(function(e){ $(this).find("#Panel_SiteGeo_1").slideToggle('fast'); console.log('clique sur #'+$(this).attr('id')); }); //clique sur l'img en question $("#CollapsiblePanelTab_SiteGeo_1 table img:eq(1)").click(function(e) { e.stopPropagation(); console.log('clique sur l\'image, ouverture du popup ici...'); //ouvre le popup ici... }); });

C'est beaucoup mieux en effet!
Par contre petit effet de bord, j'utilise les id au lieu des class parce que j'ai un nombre indéterminé de div Panel_SiteGeo_x non imbriqués :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
                                            <div id="CollapsiblePanel_SiteGeo_1" class="CollapsiblePanel">
                                                <div id="CollapsiblePanelTab_SiteGeo_1" class="CollapsiblePanelTab_SiteGeo_detail" tabindex="0" style="font-size:12px;">
                                                </div>
                                            </div>
                                            <div id="CollapsiblePanel_SiteGeo_2" class="CollapsiblePanel">
                                                <div id="CollapsiblePanelTab_SiteGeo_2" class="CollapsiblePanelTab_SiteGeo_detail" tabindex="0" style="font-size:12px;">
                                                </div>
                                            </div>
                                            <div id="CollapsiblePanel_SiteGeo_3" class="CollapsiblePanel">
                                                <div id="CollapsiblePanelTab_SiteGeo_3" class="CollapsiblePanelTab_SiteGeo_detail" tabindex="0" style="font-size:12px;">
                                                </div>
                                            </div>
<!-- etc etc

Et là du coup, quand je clic sur le div parent, ça me ferme tous les div, pas seulement celui que je souhaite...

Citation:

j'utilise les id au lieu des class parce que j'ai un nombre indéterminé de div Panel_SiteGeo_x

Dans ce cas, le code changera, mais pour que cela fonctionne correctement, il faut :
1-l'événement clique soit appliqué sur la td <td class="right ouvert" align="right"> </td>, en ajoutant l'attribut class="right ouvert" puis tu n'a qu'a ajouter les pseudos en css
Code:

1 2 3 4 5 6 7 .CollapsiblePanelTab_SiteGeo_detail .right.ouvert:after{ content:"\25b2"; } .CollapsiblePanelTab_SiteGeo_detail .right.fermer:after{ content:"\25bc"; }
2-ajouter une classe (img_popup) aux images qui affichent le popup <img src="../images/folder.png" height="20" title="DOSSIER SOCIETE" class="img_popup" align="absmiddle" />
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 $(document).ready(function(e){ //clique sur le div parent $(".CollapsiblePanelTab_SiteGeo_detail .right").click(function(e){ if($(this).hasClass('ouvert')){ $(this).removeClass('ouvert').addClass('fermer'); } else if($(this).hasClass('fermer')){ $(this).removeClass('fermer').addClass('ouvert'); } $(this).closest('.CollapsiblePanelTab_SiteGeo_detail') .next('div.CollapsiblePanelOpen_SiteGeo_detail') .slideToggle('fast'); }); //clique sur l'img en question $(".CollapsiblePanelTab_SiteGeo_detail table img.img_popup").click(function(e) { e.stopPropagation(); console.log('clique sur l\'image, ouverture du popup ici...'); //ouvre le popup ici... }); });

08/01/2019, 17h49
Metal29

D'accord mais donc du coup le clic déclenchant l'action ne se ferait que sur des flèches créées en Css c'est bien ça ?
08/01/2019, 19h16
Toufik83

oui, ce sont les flèches qui déclenchent l'événement pour afficher/masquer le <div class="CollapsiblePanelOpen_SiteGeo_detail"> au lieu du div parent.
09/01/2019, 09h40
Metal29

Merci pour avoir pris le temps de me répondre mais ça ne colle pas au fonctionnement de l'appli existante... Je ne peux pas casser un moyen de navigation uniquement pour une section alors que les 4 autres catégories fonctionnent au clic sur le div complet...
En plus ça lance 2 fois l'action et la flèche css n'apparait pas... (Je pense que ça vient du mode compatibilité IE7 par défaut)

Trouvé!
En fait j'ai panaché tes solutions :
En bas de page :

Code:

1
2
3
4
5
									  		<script>
                                            $( "#CollapsiblePanelTab_SiteGeo_<%=nb_site_geo%>" ).click(function() {
                                              $( "#Panel_SiteGeo_<%=nb_site_geo%>" ).slideToggle( "fast" );
                                            });
                                            </script>

Et pour la gestion du clic sur l'image:

Code:

1
2
3
4
5
6
7
8
9
10
												<script language="javascript">
                                                    $(document).ready(function(e){
                                                        //clique sur l'img en question
                                                        $("#CollapsiblePanelTab_SiteGeo_<%=nb_site_geo%> table img:eq(1)").click(function(e) {
                                                            e.stopPropagation();
                                                            //console.log('clique sur l\'image, ouverture du popup ici...');
                                                            lance_explorateur_sitegeo('<%=Res_site_geo(1)%>');
                                                        });
                                                     });
                                                </script>