Annuler event clic sur le parent sur clic sur element enfant

**Metal29** · 21/12/2018, 11h54

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 HTML :

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

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 :

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

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!

**NoSmoking** · 21/12/2018, 16h24

Bonjour,
modifie la logique de ton code

Code :

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

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 :

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

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

**Metal29** · 28/12/2018, 14h42

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!

**NoSmoking** · 29/12/2018, 11h15

... ç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.

**Metal29** · 07/01/2019, 15h37

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 :

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

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 :

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

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

même résultat...

**Toufik83** · 07/01/2019, 17h54

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.

**Metal29** · 07/01/2019, 18h24

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 HTML :

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

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>

**Toufik83** · 07/01/2019, 19h03

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 :

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

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...
        });
 
});

**Metal29** · 08/01/2019, 09h44

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 HTML :

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

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...

**Toufik83** · 08/01/2019, 16h06

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 css :

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

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 jQuery :

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

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...
	});
 
});

**Metal29** · 08/01/2019, 17h49

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 ?

**Toufik83** · 08/01/2019, 19h16

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.

**Metal29** · 09/01/2019, 09h40

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)

**Metal29** · 09/01/2019, 10h06

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

Code :

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

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 :

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

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>

Annuler event clic sur le parent sur clic sur element enfant

jQuery

Discussions similaires

Partager

Partager