Priorité des événements onkeydown

**dodane** · 04/11/2010, 09h51

Bonjour,

J'ai un problème à propos des événements onkeydown. Je possède tout d'abord un onkeydown sur un <div>. Pas de soucis, peu importe où je suis dans ma div, il me répond bien. Ensuite dans ce <div>, je crée un élément <span> par exemple avec dedans un lin <a>. Je souhaite rajouter un onkeydown sur mon lien. Et là, le onkeydown du lien n'est jamais pris en compte.

Code Html :

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

1
2
3
4
5
6
7
8
 
...
<div id="maDiv1" onkeydown="alert('maDiv1');">
<span>
<a href="#" name="monLien" onkeydown="alert('monLien');">Clic</a>
</span>
</div>
...

Si ce n'était pas assez clair, c'est toujours le alert('maDiv1') qui est déclenché peu importe que je sois sur mon lien ou non.

Avec la console JS de Chrome, je voit que mon lien possède deux événements onkeydown associés. Celui du <div> et son propre événement.

Existe-t-il une règle de priorité sur ces types d'événements? Est-ce normal qu'il prenne tout le temps en compte celui de mon <div>? Comment puis-je faire pour que mon onkeydown sur mon lien soit prioritaire?

Merci d'avance.

**SpaceFrog** · 04/11/2010, 10h29

cancelbubble et stoppropagation ?

**dodane** · 04/11/2010, 11h22

Merci pour la réponse. Sauf que je ne maitrise pas ces propriétés.
J'ai essayé mais sans succès.

Après mon fonctionnement m'empèche peut-être de mettre en place tout cela.
J'avais mis en exemple des alert() mais réellement mes onkeydown appellent une seule et même fonction. L'intérêt pour moi de mettre deux fois la gestion de l'événement, est de pouvoir récupérer le target de l'événement. Selon que je suis dans le <div> ou sur mon lien <a> je n'aurais pas le même target. Dans mon cas (sans les propriétés cancelbubble et stoppropagation), mon target est toujours le <div>, puisque que apparemment il prend toujours l'événement parent en priorité.

Concernant le stoppropagation, je dois le mettre en oeuvre avant l'appel de ma fonction sur le <div> comme ci-dessous?

Code Html :

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

1
2
3
4
5
<div id="maDiv1" onkeydown="if(event.stopPropagation)event.stopPropagation();mafonction();">
<span>
<a href="#" name="monLien" onkeydown="mafonction();">Clic</a>
</span>
</div>

ou bien carrément dans mafonction()? ou ailleurs?

**sekaijin** · 04/11/2010, 14h03

pour comprendre la différence de fonctionnement avec ou sans stopPropagation
voici un petit exemple qui construit deux lien le premier sans stop event
en l'activant et en pressant une touche les deux alertes s'activent
sur le second avec stopPropagation seule l'alerte du lien s'affiche

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
29
30
31
32
33
34
35
36
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
    function load() {
      var aDiv = document.createElement('div');
      aDiv.onkeydown = function(event) {
        alert('maDiv1');
      };
      aDiv.appendChild(document.createTextNode('before '));
 
      var aLink = aDiv.appendChild(document.createElement('span')).appendChild(document.createElement('a'));
      aLink.setAttribute('name', 'monlien');
      aLink.setAttribute('href', '#');
      aLink.appendChild(document.createTextNode('Clic'));
      aLink.onkeydown = function(event) {
        alert(this.name);
        return false;
      };
      aDiv.appendChild(document.createTextNode(' '));
      aLink = aDiv.appendChild(document.createElement('span')).appendChild(document.createElement('a'));
      aLink.setAttribute('name', 'monlien2');
      aLink.setAttribute('href', '#');
      aLink.appendChild(document.createTextNode('Clic'));
      aLink.onkeydown = function(event) {
        alert(this.name);
        event.stopPropagation();
        return false;
      };
      aDiv.appendChild(document.createTextNode(' after'));
      document.getElementById(1).appendChild(aDiv);
    }
  </script>
  </head>
  <body onload="load()" id=1></body>
</html>

A+JYT

**dodane** · 05/11/2010, 09h46

Ok merci pour tout!

Priorité des événements onkeydown

JavaScript

Discussions similaires

Partager

Partager