YUI stopEvent ne fonctionne pas

Question

J'essaie d'empêcher les événements JavaScript de continuer à se propager, en utilisant YUI. Ce qui suit est un peu HTML minimal et un peu de JavaScript minimal qui illustre le problème:

HTML:

<a href="#foo" onClick="fooClickTest()" id="foo">foo</a>&nbsp; 
<a href="#bar" id="bar">bar</a>&nbsp; 

JavaScript:

function fooClickTest(e) { 
    alert('fooClickTest'); 
    YAHOO.util.Event.addListener('bar', 'click', barClickTest1); 
    YAHOO.util.Event.addListener('bar', 'click', barClickTest2); 
    YAHOO.util.Event.addListener('bar', 'click', barClickTest3); 
    YAHOO.util.Event.preventDefault(e); 
} 

function barClickTest1(e) { 
    alert('barClickTest1'); 
    YAHOO.util.Event.preventDefault(e); 
} 

function barClickTest2(e) { 
    alert('barClickTest2'); 
    YAHOO.util.Event.preventDefault(e); 
    YAHOO.util.Event.stopEvent(e); 
// Also tried: 
// YAHOO.util.Event.stopPropagation(e); 
// and: 
//  if (e.stopPropagation) { 
//   e.stopPropagation(); 
//  } else { 
//   e.cancelBubble = true; 
//  } 
} 

Ce que je pense arriver est que l'utilisateur peut cliquer sur ' foo 'pour ajouter les trois gestionnaires de clic, puis cliquez sur' barre '. Ensuite, l'utilisateur verra deux alertes, 'BarClickTest1' et 'BarClickTest2'. Au lieu de cela, les trois alertes se produisent. YAHOO.util.Event.stopEvent (e) ne fait pas ce que j'attends, qui est d'arrêter l'événement propageant à barClickTest3.

J'ai testé mon code dans Firefox 3.0.7 et dans Safari 3.2.1. Comme vous pouvez le voir ci-dessus, j'ai aussi essayé YAHOO.util.Event.stopPropagation (e) et e.stopPropagation(). Aucun d'entre eux n'a fait l'affaire.

Ceci est évidemment un exemple artificiel, bien qu'il démontre le problème. Dans la vraie solution, je vais seulement empêcher la propagation d'un événement si certaines conditions sont remplies.

Est-ce que ma compréhension des événements de JavaScript est simplement bousillée? Comment puis-je atteindre mes objectifs?

Answer 1

Ce ne fonctionne pas comme prévu parce que:

• YAHOO.util.Event.preventDefault() indique que le navigateur ne pas effectuer l'action par défaut associée à l'élément, dans ce cas, la navigation à l'attribut href sur l'ancre.
• YAHOO.util.Event.stopPropagation() annule le barbotage d'événements et déclenche les gestionnaires d'événements sur les éléments parents.
• YAHOO.util.Event.stopEvent() appelle simplement preventDefault et stopEvent.

sans écrire de code supplémentaire, il n'y a aucun moyen d'empêcher certains auditeurs d'événements sur un seul élément de mise à feu, et même si vous pouviez vous ne pouviez pas être garanti l'ordre d'écoute d'événement serait tiré dans.

Vous devrez réécrire votre code en tant que gestionnaire d'événement unique afin de pouvoir contrôler si le code associé à votre troisième gestionnaire de clic s'exécutera.