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

我想设置

来监听具有 only 的子元素上的所有点击>data-selected 属性。

如果我做错了什么，请告诉我：

事件被设置为：

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

但是单击回调会在单击所有 div 时触发，而不仅仅是定义了数据可选择属性的 div。您可以在 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();
});