5

問題: YUI3 - 同じクラスを持つリンクの Onclick イベント処理

ページには同じクラスのリンクがほとんどありません。リンクの 1 つをクリックすると、クリックされたリンクに基づいていくつかの異なるアクションが実行されます。

<a href="?page=1" data="test1" class="sample">One</a>
<a href="?page=2" data="test2" class="sample">two</a>
<a href="?page=3" data="test3" class="sample">three</a>

ハンドラー コード:

Y.all('.sample').on('click', function(e){
    e.preventDefault();
    alert(this.getAttribute("data"));
});

リンクをクリックすると、すべての「データ」属性のリストが表示されます。クリックされたリンクのデータのみが必要です。

4

3 に答える 3

2

クリックされている要素にアクセスするe.target代わりに使用することもできます。this

Y.all('.sample').on('click', function(e){
  e.preventDefault();
  alert(e.target.getAttribute("data"));
});

さらにパフォーマンスを向上させるために、イベント委任を使用できます。

Y.one('body').delegate('click', function(e){
  e.preventDefault();
  alert(this.getAttribute("data"));
}, '.sample');
于 2012-08-01T19:16:11.413 に答える
1

all一致した要素のリストを提供します。eachリストを反復処理し、個々のノードに対して処理を実行するために使用できます。詳細については、ノード クラス APIを参照してください。

コードとjsfiddle の例を次に示します。

Y.all('.sample').each(function(node) {
    node.on('click', function(e) {
        e.preventDefault();
        alert(node.getAttribute("data"));
    });
});​

yulibrary.com (http://yuilibrary.com/yui/docs/event/#nodelist-this) のイベント ユーザー ガイドにも、この質問に対する FAQ エントリがあります。通常は、イベント委任を使用することをお勧めします。

于 2012-08-01T15:32:36.103 に答える
0

ここでは、イベント委任がより良い解決策です。@juandopazo に同意します

委任を使用したくない場合は、 Y.all('.sample').each(...) (@user322896 の解決策) または e.target (@juandopazo の解決策) を使用できますが、私は通常それを行います別の方法：

Y.on('click', function(e){
    e.preventDefault();
    alert(this.getAttribute("data"));
}, '.sample');

これは委任構文ではなく (リスナーは直接リンクにアタッチされます)、NodeList オブジェクトがないためthis、特定のリンク ノードを参照します。この方法には、 と比較してパフォーマンス上の利点もありY.all('.sample')ます。これを読んでください:

于 2012-08-24T12:31:38.213 に答える