Délégation d'événements MooTools utilisant des attributs de données HTML5

Question

Est-il possible d'avoir une délégation d'événement en utilisant les attributs de données HTML5 dans MooTools?

La structure HTML que j'ai est:

​<div id="parent"> 
    <div>not selectable</div> 
    <div data-selectable="true">selectable</div> 
    <div>not selectable either.</div> 
    <div data-selectable="true">also selectable</div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Et je veux installer <div id="parent"> écouter tous les clics seulement sur des éléments enfants qui ont l'attribut data-selected.

S'il vous plaît laissez-moi savoir si je fais quelque chose de mal:

Les événements sont en cours configuration que:

$("parent").addEvent("click:relay([data-selectable])", function(event, el) { 
    alert(this.get('text')); 
}); 

mais le rappel de clic est tiré à cliquer tous les années div, pas seulement ceux avec un attribut sélectionnable par les données défini. Vous pouvez voir cet exemple sur http://jsfiddle.net/NUGD4/

Une solution de contournement consiste à ajouter cela comme une classe CSS, qui fonctionne avec la délégation mais je préférerais pouvoir utiliser les attributs de données tels qu'ils sont utilisés dans toute l'application. Mootools n'accepte pas "-" dans le nom de l'attribut.

Answer 1

Ce que vous pouvez faire est d'utiliser le futur moteur de sélection (de 1,3) avec la version 1.2, il suffit de suivre les instructions suivantes: gist.github.com/361474

Answer 2

Je considère, c'est bug. Utilisez undersore:

data_selectable="true" 

Answer 3

A partir de MooTools 1.3, le code ci-dessous fonctionne très bien comme on le voit dans ce DEMO

<div id="parent"> 
    <div>not selectable</div> 
    <div data-selectable="true">selectable</div> 
    <div>not selectable either</div> 
    <div data-selectable="true">also selectable</div> 
</div> 

$("parent").addEvent("click:relay([data-selectable])", function(ev, el) { 
    this.highlight(); 
});