Sélecteur, exclusion d'un tag HTML

Version imprimable

31/12/2010, 14h24
Digilougm

Sélecteur, exclusion d'un tag HTML
Bonjour,

Pour les besoins d'une application, je souhaiterais pouvoir exclure un tag HTML d'un sélecteur jQuery. Voici mon problème :
Code:

1 2 3 <div id="maDiv"> <a href="lien">Lien</a> </div>
Code:

1 2 3 $('#maDiv').click(function(){ // Code });
Actuellement, la fonction ci-dessus se déclenche lorsque je clique sur le lien contenu dans ma div, j'aimerais que ce ne soit pas le cas. Étant débutant en jQuery, je n'arrive pas à trouver de solution.

Merci par avance pour votre aide.

Bonjour

Exemple :

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
61
62
63
64
65
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		#maDiv {
			width:200px;
			height:200px;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<div id="maDiv">
	<a href="#">Lien</a>
</div>
 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
 
/*
 * Pour cliquer sur la division sans
 * propager l'évènement
 */
$('#maDiv').click(function(){
    // Code
	alert("clic sur maDiv");
 
	return false;
});
 
/*
 * Pour pouvoir cliquer sur les liens
 * inclus dans la division
 */
$("#maDiv a").click(function(){
    // Code
	alert("clic sur a");
 
	return false;
});
 
		});
 	</script>
</body>  
</html>

01/01/2011, 15h03
Digilougm

Effectivement, la première fonction ne se déclenche plus. En revanche, le lien n'est plus fonctionnel en retournant false.

N'y a-t-il pas un moyen d'empêcher simplement le déclenchement de cette fonction en cliquant sur le lien, sans pour autant "casser" le lien ?

Bonsoir

Si le lien doit rester fonctionnel, essayez sans le "return false;" ou la version suivante :
Code:

1 2 3 4 5 6 $("#maDiv a").click(function(event){ event.stopPropagation(); // http://api.jquery.com/event.stopPropagation/ // Code alert("clic sur a"); });

01/01/2011, 17h35
Digilougm

Je vous remercie pour votre aide, mais cette solution ne fonctionne pas non plus. La première méthode se déclenche toujours.

Cet exemple fonctionne-t-il convenablement chez vous ?

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
61
62
63
64
65
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		#maDiv {
			width:200px;
			height:200px;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<div id="maDiv">
	<a href="http://danielhagnoul.developpez.com/">Lien</a>
</div>
 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
 
/*
 * Pour cliquer sur la division sans
 * propager l'évènement
 */
$('#maDiv').click(function(event){
	event.stopPropagation();
 
    // Code
	alert("clic sur maDiv");
});
 
/*
 * Pour pouvoir cliquer sur les liens
 * inclus dans la division
 */
$("#maDiv a").click(function(event){
	event.stopPropagation();
 
	// Code
	alert("clic sur a");
});
 
		});
 	</script>
</body>  
</html>

01/01/2011, 18h27
Digilougm

Je viens de m'apercevoir que j'avais oublié le paramètre event de votre deuxième solution. Elle fonctionne parfaitement au final. Merci beaucoup !