stopper la propagation de l'évènement onclick

Version imprimable

Bonjour,
voici un extrait de ma page jsp

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<body onclick="f1();">
       <img id="image"  name="image" onclick="f2()" src="..."/>
       <div id="pagenav_menu" " onclick="f3()">
               <table>
                   <tbody>
                        <tr>
                                <td>Aller à la page...</td>
                        </tr>
                         <tr>
                                <td>
                                        <form id="pagenav_form" action="..." method="get" onsubmit="return gotopage()" name="pagenav_form">
                                                 <input id="pagenav_itxt"  type="text"  name="pagenav_itxt"/>
                                                 <input id="pagenav_ibtn" class="button" type="button" value="Go"/>
                                         </form>
                               </td>
                         </tr>
                    </tbody>
                </table>
        </div>
</body>

Quand je clique sur l'un des 4 éléments suivants :

Code:

1
2
3
4
5
 
<img id="image"  name="image" onclick="f2()" src="..."/>
<div id="pagenav_menu" " name="pagenav_menu" onclick="f3()">
<input id="pagenav_itxt"  type="text"  name="pagenav_itxt"/>
<input id="pagenav_ibtn" class="button" type="button" value="Go"/>

l'évènement onclick est propagé vers l'élément body et la fonction f1() est appelée. Or je voudrais stopper la propagation de l'évènement onclick au niveau des 2 éléments suivants : <img> et <div>

J'ai d'abord essayé quelque chose du type

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
document.getElementById('pagenav_menu').onclick=function() {
	var e = arguments[0];
	if (!e)      
		e = window.event;    
	if (e.cancelBubble)      
		e.cancelBubble = true;    
	else      
		e.stopPropagation();
}
 
ou
 
document.pagenav_menu.onclick=function() {
	var e = arguments[0];
	if (!e)      
		e = window.event;    
	if (e.cancelBubble)      
		e.cancelBubble = true;    
	else      
		e.stopPropagation();
}

mais le programme ne passe même pas dans cette fonction. Ca ne marche pas. Y a t-il une erreur ? (c'est ma première question)

J'ai alors essayé la chose suivante :

Code:

1
2
3
4
5
6
7
8
9
10
 
function f3(){
	var e = arguments[0];
	if (!e)      
		e = window.event;    
	if (e.cancelBubble)      
		e.cancelBubble = true;    
	else      
		e.stopPropagation();
}

Là le programme passe dans la fonction f3() mais il ne reconnait pas la variable e (évènement) qui est "undefined" et il ne se passe rien et l'évènement est quand même propagé. Le problème est que je suis obligé de gérer différemment la propagation suivant que je suis sous IE ou un autre browser.
Est-ce que quelqu'un peut me venir en aide ? Merci

Petite réponse avant de partir :

Déjà je ne saurais que trop recommander l'utilisation d'un Framework (genre jQuery !), qui te permettra de t'abstraire des compatibilités entre navigateurs (c'est lui qui gère tout seul comme un grand, du coup tu peux te consacrer à d'autres tâches plus "métier" dans ton projet).

Il faut passer ton élément event ("e", dans ton code), à l'appel de la fonction.

Genre, en code "fait main" :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="blabla" onclick="myFunction(event);">click me !</div> <script type="text/javascript"> function myFunction(event) { // code pour gérer le event sur les différents navigateurs ... // le vrai code de la fonction doThings(); } </script>
En jQuery :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div id="blabla">click me !</div> <script type="text/javascript"> $('#blabla').click(function(e) { e.stopPropagation(); // Le code de la fonction doThings(); });
Voici un lien expliquant tout en détails :
http://www.jquery.info/spip.php?article47

Bonne journée !

14/06/2009, 15h28
flamant

Merci Lideln75 pour ta réponse, maintenant ca marche. Et merci pour le tuyau Jquery.