Comment supprimer l'événement du parent ?

Version imprimable

Bonsoir,

J'ai un souci d'héritage des événements en javascript.
Pouvez-vous prendre un peu de votre temps pour m'aider ?

la fonction "envoiDetails()" ne doit pas s'exécuter quand je clique sur comparer (case + label) !
Je retourne le code dans tous les sens, je n'y arrive pas !

Ceci doit fonctionner sous IE7+, FF, Chrome, Opera, safari...

Pouvez-vous m'aider ?
D'avance, un immense merci !

Voici le code :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
 
function liretablejson(jtable) {
	oTable = "<table cellpadding='0' cellspacing='0' border='0'>";
	oTable += "<tbody>";
	oCol = 0;
	oLig = 0;
	aData = jtable.aaData;
	triref = jtable.iTotalDisplayRecords;
	maxref = jtable.iTotalRecords;
	if (triref < (oFinArticle+1)) {
		oFinArticle = triref - 1;
	}
	for (var ilire = oDebArticle; ilire <= oFinArticle; ilire++) {
		Data = aData[ilire];
		finition = Data[1];
		switch (finition) {
			case "WG":
				matiere = "Or blanc";
				break;
			case "YG":
				matiere = "Or jaune";
				break;
			case "PT":
				matiere = "Platine";
				break;
			default:
				matiere = "nc";
				break;
			}
		description = Data[4];
		oCol++;
		if (oCol == 1) {
			oTable += '<tr>';
			oLig++;
		}
		oCellule  = "<td>";
		oCellule += "<div class='case' onmouseover='search(" + oLig + ", " + oCol + ", \"" + Data[0] + "\");' onmouseout='nosearch();' onClick='envoiDetails(\"" + Data[0] + "\");'>";
		oCellule += "  <img class='image_1m invisible' src='" + dossvue02+Data[11] + "' alt='bague' />";
		oCellule += "  <img class='image_1 invisible' src='" + dossvue02+Data[11] + "' alt='bague' />";
		oCellule += "  <img class='image_0' src='" + dossvue01+Data[10] + "' alt='bague' />";
		oCellule += "  <div class='comp' id='tag" + Data[0] + "' alt='recherche'>";
		oCellule += "    <input id='comparer[\"" + Data[0] + "\"]' type='checkbox' class='curseur' onClick='acomparer(\"" + Data[0] + "\");'>";
		oCellule += "    <label for='comparer[\"" + Data[0] + "\"]'>&nbsp;Comparer</label>";
		oCellule += "  </div>";
		oCellule += "  <img class='loupe invisible' src='diamants/images/general/loupenoire.gif' alt='recherche' />";
		oCellule += "  <div class='informations'>";
		oCellule += "  <p class='case01'>"+Data[2]+" - <span class='grisfonce c11'>" + matiere + "</span></p>";
		oCellule += "  <p class='case02'><span class='grisfonce'>" + description.slice(0,70) + "...</span></p>";
		oCellule += "  <p class='case03'>"+Data[6]+" &euro;</p>";
		oCellule += "  </div>";
		oCellule += "</div>";
		oCellule += "</td>";
		oTable += oCellule;
		if (oCol == mCol || ilire == oFinArticle) {
			oCol = 0;
			oTable += '</tr>';
		}
	}
	oTable += "</tbody>";
	oTable += "</table>";
	document.getElementById("bloc3102").innerHTML=oTable;
}
 
function acomparer(sref) {
	alert(sref);
	var swTrouve=-1;
	for (var k=0; k<ckComparer.length; k++) {
		if (ckComparer[k] == sref) {
			swTrouve=k;
     			k=ckComparer.length;
		}
	}
	if (swTrouve < 0) {
		ckComparer.push(sref);
	} else {
		ckComparer[swTrouve] = 0;
	}
}

18/09/2013, 12h55
SpaceFrog

fais une recherche avec cancelBubble() et stopPropagation()
18/09/2013, 13h29
jytest

Tout ceci est vrai en jquery...
Mais ici, je n'utilise pas jquery.
Alors comment faire autrement ?
Une idée pour m'aider ?
18/09/2013, 13h30
SpaceFrog

8O

qui a parlé de jquery ... ??????????????????
18/09/2013, 13h34
jytest

Sorry. Je croyais !

Mais tu peux m'aider un peu plus,
à mettre cela en place avec stoppropagation() ?

A l'aide, stp
18/09/2013, 19h05
NoSmoking

Bonjour,
une petite recherche sur le site te serait bénéfique...
:fleche: http://www.developpez.com/recherche/...&sa=Rechercher

J'ai pourtant essayé (après plein de lectures)...
Mais ceci ne fonctionne pas...

Pouvez-vous m'aider à y voir plus clair ?
D'avance, un immense merci.

Voici mon nouveau code :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
	function liretablejson(jtable) {
		oTable = "<table cellpadding='0' cellspacing='0' border='0'>";
		oTable += "<tbody>";
		oCol = 0;
		oLig = 0;
		aData = jtable.aaData;
		triref = jtable.iTotalDisplayRecords;
		maxref = jtable.iTotalRecords;
		oMessage = "";
		if (cut != "rond") {
			oMessage += "<p style='text-align:center; margin-top:18px;'>";
			oMessage += "Auncun solitaire ne convient pas<br>pour votre diamant de forme <span class='bold'>" + cut + "</span> !<br><br>";
			oMessage += "N'h&eacutesitez surtout pas &agrave nous <a href='mailto:david@celinni.com'>recontactez par email</a> !<br><br>";
			oMessage += "Vous pouvez aussi <a href='recherche-diamant.htm'>choisir un autre diamant</a> !<br><br>";
			oMessage += "</p>";
			triref=0;
			document.getElementById("bloc3102").innerHTML=oMessage;
			return;
		}
		if (carat < .2) {
			oMessage += "<p style='text-align:center; margin-top:18px;'>";
			oMessage += "Auncun solitaire ne convient pas<br>pour le poids de votre diamant < 0.20 carats (<span class='bold'>" + carat + " carats</span>) !<br><br>";
			oMessage += "N'h&eacutesitez surtout pas &agrave nous <a href='mailto:david@celinni.com'>recontactez par email</a> !<br><br>";
			oMessage += "Vous pouvez aussi <a href='recherche-diamant.htm'>choisir un autre diamant</a> !<br><br>";
			oMessage += "</p>";
			triref=0;
			document.getElementById("bloc3102").innerHTML=oMessage;
			return;
		}
		if (triref == 0) {
			oMessage += "<p style='text-align:center; margin-top:18px;'>";
			oMessage += "Aucun solitaire n'existe pas<br>suivant vos crit&egrave;res de s&eacute;lection ci-dessus !<br><br>"
			oMessage += "N'h&eacutesitez surtout pas &agrave nous <a href='mailto:david@celinni.com'>recontactez par email</a> !<br><br>";
			oMessage += "Vous pouvez aussi <a href='recherche-diamant.htm'>choisir un autre diamant</a> !<br><br>";
			oMessage += "</p>";
			document.getElementById("bloc3102").innerHTML=oMessage;
			return;
		}
		if (triref < (oFinArticle+1)) {
			oFinArticle = triref - 1;
		}
		for (var ilire = oDebArticle; ilire <= oFinArticle; ilire++) {
			Data = aData[ilire];
			finition = Data[1];
			switch (finition) {
				case "WG":
					matiere = "Or blanc";
					break;
				case "YG":
					matiere = "Or jaune";
					break;
				case "PT":
					matiere = "Platine";
					break;
				default:
					matiere = "nc";
					break;
			}
			description = Data[4];
			oCol++;
			if (oCol == 1) {
				oTable += '<tr>';
				oLig++;
			}
			oCellule  = "<td>";
			oCellule += "<div id='bulle" + Data[0] + "' class='case' onmouseover='search(" + oLig + ", " + oCol + ", \"" + Data[0] + "\");' onmouseout='nosearch();' onClick='envoiDetails(\"" + Data[0] + "\");'>";
			oCellule += "  <img class='image_1m invisible' src='" + dossvue02+Data[11] + "' alt='bague' />";
			oCellule += "  <img class='image_1 invisible' src='" + dossvue02+Data[11] + "' alt='bague' />";
			oCellule += "  <img class='image_0' src='" + dossvue01+Data[10] + "' alt='bague' />";
			oCellule += "  <div id='tag" + Data[0] + "' class='comp' alt='recherche'>";
			oCellule += "    <input id='comparer[\"" + Data[0] + "\"]' type='checkbox' class='curseur' onClick='acomparer(\"" + Data[0] + "\"); stopPropagation(event);'>";
			oCellule += "    <label for='comparer[\"" + Data[0] + "\"]'>&nbsp;Comparer</label>";
			oCellule += "  </div>";
			oCellule += "  <img class='loupe invisible' src='diamants/images/general/loupenoire.gif' alt='recherche' />";
			oCellule += "  <div class='informations'>";
			oCellule += "  <p class='case01'>"+Data[2]+" - <span class='grisfonce c11'>" + matiere + "</span></p>";
			oCellule += "  <p class='case02'><span class='grisfonce'>" + description.slice(0,70) + "...</span></p>";
			oCellule += "  <p class='case03'>"+Data[6]+" &euro;</p>";
			oCellule += "  </div>";
			oCellule += "</div>";
			oCellule += "</td>";
			oTable += oCellule;
			if (oCol == mCol || ilire == oFinArticle) {
				oCol = 0;
				oTable += '</tr>';
			}
		}
		oTable += "</tbody>";
		oTable += "</table>";
		document.getElementById("bloc3102").innerHTML=oTable;
	}

avec bien sûr les fonctions :

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
 
	function cocherComparer(sref) {
		var nocomparaison = "comparer["+sref+"]";
		if (document.getElementById(nocomparaison).checked == false) {
			document.getElementById(nocomparaison).checked = true;
		} else {
			document.getElementById(nocomparaison).checked = false;
		}
		acomparer(sref);
	}
 
	function acomparer(sref) {
		alert(sref);
		var swTrouve=-1;
		for (var k=0; k<ckComparer.length; k++) {
			if (ckComparer[k] == sref) {
				swTrouve=k;
     			k=ckComparer.length;
			}
		}
		if (swTrouve < 0) {
			ckComparer.push(sref);
		} else {
			ckComparer[swTrouve] = 0;
		}
	}
 
	function stopPropagation(event) {
		var event = e || window.event;
		if (event.stopPropagation) {
			event.stopPropagation();
		} else {
			event.cancelBubble = true;
		} 
	}

Dans ce cas passe par la délégation de l'événement

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[Délégation event]</title>
<style>
div{
  width:500px;
  height:500px;
  background:#ABC;
}
</style>
<script>
function fctAction(e){
  var src = e.target || e.srcElement;
  alert( src.id || 'je n\'ai pas d\'id mais j\ai du pétrole!');
}
</script>
</head>
<body>
<div onclick="fctAction(event);">
  <input id="check_1" type="checkbox"><br>
  <input id="check_2" type="checkbox">
</div>
</body>
</html>

19/09/2013, 22h50
jytest

Hé, c'est super ce truc !!!
Grand merci pour ton aide !
20/09/2013, 18h39
NoSmoking

Au vu de ton code tu peux même remonter la gestion de l'événement au niveau de la TABLE.
20/09/2013, 19h27
jytest

Bien vu !
Merci.