使用 HTML5 数据属性的 MooTools 事件委托答案

【问题标题】：MooTools Event Delegation using HTML5 data attributes使用 HTML5 数据属性的 MooTools 事件委托
【发布时间】：2010-04-17 21:10:13
【问题描述】：

是否可以使用 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 时触发，而不仅仅是定义了数据可选属性的那些。你可以在http://jsfiddle.net/NUGD4/看到这个例子

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

【问题讨论】：

问题是 MooTools 中的当前选择器引擎在执行$$('div[data-selectable]') 时甚至不会返回正确的元素。如果不对选择器引擎进行一些基本的更改，就无法绕过它。
现在，您可以在 1.2 版本中使用未来的选择器引擎（从 1.3 开始），只需按照以下说明操作：gist.github.com/361474
感谢@Oskar 的链接。它运行良好！ Slick 会取代 1.3 中现有的选择器引擎吗？
您能否将此评论添加为答案，以便我接受？
是的，事实上 1.3 版本将使用 Slick 作为选择器引擎 - 我们都对此感到非常兴奋，因为 Slick 是一个杰作！

标签： javascript mootools event-delegation

【解决方案1】：

您可以在 1.2 版本中使用未来的选择器引擎（从 1.3 开始），只需按照以下说明操作：gist.github.com/361474

【讨论】：

【解决方案2】：

Mootools 不接受属性名称中的“-”。我认为，这是错误。使用鞋底：

data_selectable="true"

【讨论】：

用下划线替换破折号不再是 HTML5，现在可以了。

【解决方案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();
});

【讨论】：