Priorité des événements onkeydown

Version imprimable

04/11/2010, 09h51
dodane

Priorité des événements onkeydown
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:

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.
04/11/2010, 10h29
SpaceFrog

cancelbubble et stoppropagation ?
04/11/2010, 11h22
dodane
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:

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?

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:

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

05/11/2010, 09h46
dodane

Ok merci pour tout!