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时会触发单击回调，而不仅仅是定义了数据可选属性的div。您可以在http://jsfiddle.net/NUGD4/

上看到此示例

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

Answer 1

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

Answer 2

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

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();
});

使用HTML5数据属性的MooTools事件委派

3 个答案: