utilisation de stop propagation pour double onclick

Version imprimable

Salut à tous ...
j'ai un petit souci...

en fait j'ai un tableau généré en ajax avec une action onclick sur chaque ligne tr
cette action déclenche le changement de page (comme un lien vers une autre page en fait)

dans chaque ligne j'ai un td qui contient une image sur laquelle j'ai aussi une action onclick (qui permet de déclencher la suppression de la ligne

problème : lorsque je clique sur l'image, les deux actions onclick sont exécutées car le navigateur considère que j'ai cliqué non seulement sur l'image mais aussi sur la ligne ...
Ce qui est vrai dans l'absolu d'ailleurs.

J'aimerai donc empécher le onclick associé au tr de se déclencher lorsque je clique sur mon image (et uniquement dans ce cas)

je pense qu'il doit falloir utiliser un truc du genre stop propagation mais alors je ne sais pas comment ...

voili voilo :(
si vous avez une idée

merki :)

un petit exemple de code html à copier coller pour voir ce que ça donne
Pensez à corriger le mot onclick qui fait planter l'envoi de messages sur le forum
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 <sc r i p t> f unction clicktr(texte) { alert (texte); } function clickimg(texte) { alert (texte); } </s c r i p t> <body> <table border="1" cellspacing="1" cellpadding="4"> <tr o nclick="clicktr('click tr');"> <td>ma</td> <td>ligne</td> <td>1</td> <td><img src="http://www.institut-instantbeaute.fr/jscalendar/delete.gif" o nclick="alert('click img');"/></td> </tr> <tr o nclick="clickimg('click tr');"> <td>ma </td> <td>ligne</td> <td>2</td> <td><img src="http://www.institut-instantbeaute.fr/jscalendar/delete.gif" o nclick="alert('click img');" /></td> </tr> </table> </body> </html>

23/02/2011, 12h12
CaviarNAS

je regarde sur le net mais je ne peux pas utiliser les solution proposées

en fait ils donnent ça comme exemple

Citation:

$("tr").click(function(event){
alert("This is : " + $(this).text());
// Comment the following to see the difference
event.stopPropagation();
});

en utilisant l'objet event...
mais dans mon cas je ne peux pas programmer ça directement dans le code jquery avec un listener car la fonction appelée par mon onclick est différente selon le contexte du tableau généré... et elle pass à chaque fois des paramètres différents... donc je ne peux pas faire quelque chose de générique... d'où l'insertion du onclick directement dans le html :(

ça complique les choses...

j'ai aussi vu cette solution

Code:

onclick="alert(2);event.stopPropagation ? event.stopPropagation() : event.cancelBubble

mais elle ne marche pas sous IE (comme dh'ab...)
23/02/2011, 12h36
CaviarNAS

1 pièce(s) jointe(s)

Raaah !!!
j'ai trouvé la soluce avec des éléments HTML déjà dans le dom ... mais pour tout ce qui est loadé en ajax ... ça marche pas :(:(:(:(:(

voir fichier joint....

HELP :(

une solution palliative qui ne permet pas d'utiliser live mais avec le onclick="clickimg('bla', event)" directement dans le html généré ça marche ...

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
	function clicktr(texte, e) {
		$('#log').append(texte+'<br>');
		return false;
	}
	function clickimg(texte, e) {
		$('#log').append(texte+'<br>');
		stopEvent(e);		
	}
 
 
	function stopEvent(e) {
		if(!e) var e = window.event;
 
		//e.cancelBubble is supported by IE - this will kill the bubbling process.
		e.cancelBubble = true;
		e.returnValue = false;
 
		//e.stopPropagation works only in Firefox.
		if (e.stopPropagation) {
			e.stopPropagation();
			e.preventDefault();
		}
		return false;
	}