utilisation de stop propagation pour double onclick

CaviarNAS · 23/02/2011, 11h41

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 :

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

CaviarNAS · 23/02/2011, 12h12

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 :

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

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

mais elle ne marche pas sous IE (comme dh'ab...)

CaviarNAS · 23/02/2011, 12h36

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

CaviarNAS · 23/02/2011, 15h30

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 :

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

++

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email