Делегирование событий MooTools с использованием атрибутов данных HTML5

Question

Возможно ли делегирование событий с использованием атрибутов данных HTML5 в MooTools?

У меня есть структура HTML:

​<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

И я хочу настроить <div id="parent"> для прослушивания всех кликов только на дочерних элементах, которые имеют атрибут data-selected.

Пожалуйста, дайте мне знать, если я делаю что-то не так:

События настраиваются как:

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

но обратный вызов click срабатывает при нажатии всех div, а не только тех, для которых определен атрибут data-selectable Вы можете увидеть этот пример на http://jsfiddle.net/NUGD4/

Обходной путь - добавить это как класс CSS, который работает с делегированием, но я бы предпочел иметь возможность использовать атрибуты данных, поскольку они используются в приложении.

Answer 1

Что вы можете сделать, это использовать будущий механизм выбора (из 1.3) с выпуском 1.2, просто следуйте этим инструкциям: gist.github.com/361474

Answer 2

Mootools не принимает "-" в имени атрибута. Я считаю, это ошибка. Используйте нижнее белье:

data_selectable="true"

Answer 3

Начиная с MooTools 1.3, приведенный ниже код работает просто отлично, как показано в этом 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();
});