événements d'observation pour les éléments avec une certaine classe ou les enfants de cet élément à l'aide de la délégation de l'événement

Question

J'ai une page avec des éléments similaires à ceci:

<div id='things'> 
    <div class='thing'> 
     <div class='activator'> 
      <span>Some text</span> 
     </div> 
    </div> 
</div> 

Le code est similaire à ceci:

$('things').observe(click, function(event) { 
    var e = event.element(); 
    if (e.match('.activator')) { 
     doSomeStuffWith(e); 
    } else if (e.match('.activator *')) { 
     doSomeStuffWith(e.up('.activator'); 
    } 
}); 

Alors si je clique sur le .activator ou l'un de ses éléments enfants, je veux appeler une fonction sur le .activator, je me demande simplement s'il n'y a pas moyen de combiner les deux if-clauses. Quelque chose comme si (e.match ('. Class, .class *') {doStuff (e.upOrSelf ('activateur'));}

Je suppose que je pourrais étendre l'élément avec une méthode upOrSelf. préfèrent ne pas faire toutes les personnalisations non standard si possible.

Answer 1

Voir here pour des discussions sur une façon plus générique à de délégation d'événements dans Prototype. en bas de la page, il y a un implementation de Event.delegate() qui utilise un petit truc pour obtenir ce que vous Il rassemble l'élément cible et ses ancêtres et applique l'écouteur d'événement à tous les éléments correspondants en utilisant Selector.matchElements

C'est un peu plus compliqué n ceci, mais voici une version abrégée (non testée):

$('things').observe('click', function(event) { 
    var child = event.element(); 
    var ancestors = [child].concat(child.ancestors()); 
    Selector.matchElements(ancestors, '.activator').each(function(element) { 
     doSomeStuffWith(element); 
    }); 
})