javascript - 使用 HTML5 数据属性的 MooTools 事件委托

Question

是否可以使用 MooTools 中的 HTML5 数据属性进行事件委托？

我拥有的 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'));
});

但是单击回调会在单击所有 div 时触发，而不仅仅是定义了 data-selectable 属性的那些。你可以在http://jsfiddle.net/NUGD4/上看到这个例子

一种解决方法是将其添加为 CSS 类，它与委托一起使用，但我希望能够使用数据属性，因为它在整个应用程序中使用。

Answer 1

您可以做的是在 1.2 版本中使用未来的选择器引擎（从 1.3 开始），只需按照以下说明操作：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();
});