stopper la propagation de l'évènement onclick

**flamant** · 14/06/2009, 11h21

Bonjour,
voici un extrait de ma page jsp

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

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

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 :

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

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

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

**Lideln75** · 14/06/2009, 12h53

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 :

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

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 :

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

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 !

**flamant** · 14/06/2009, 15h28

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

stopper la propagation de l'évènement onclick

JavaScript

Discussions similaires

Partager

Partager