0

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クラスとして追加することです。これは委任で機能しますが、アプリケーション全体で使用されるデータ属性を使用できるようにしたいと思います。

4

3 に答える 3

3

できることは、1.2リリースで将来のセレクターエンジン（1.3以降）を使用することです。次の手順に従ってください：gist.github.com/361474

于 2010-04-20T22:02:26.110 に答える
2

Mootoolsは属性名に「-」を受け入れません。バグだと思います。アンダーソールを使用する：

data_selectable="true"
于 2010-04-17T22:00:01.870 に答える
0

MooTools 1.3以降、このデモで見られるように、以下のコードは問題なく機能します。

<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();
});
于 2011-03-13T16:31:46.560 に答える