javascript - 子ノードを持つ要素のJavascriptデリゲート

Question

簡単な例では、要素の第1レベルの子のデリゲートを作成しようとしています。問題は、子要素に子がある場合に発生します。マウスイベントは、クリックされた要素を考慮します（レベルに関係なく）。

私の解決策は、第1レベルの子供に到達するまで循環することです。しかし、これが最善の方法かどうか疑問に思います。

デリゲートクリック時に第1レベルの子を直接返す方法はありませんか？

JS

window.onload=function(){
document.getElementById('test').addEventListener('click', function(e){
console.log(e.target);alert(e.target.id);
   }, false);
}

HTML

<div id="test">
<a href="#" id="first">First</a>
<a href="#" id="second"><b>Second</b></a>
<a href="#" id="third">Third</a>
<a href="#" id="fourth">Fourth</a>
<div id="div">Division</div>
<div id="div2"><span>Division</span></div>
</div>

score 3 · Accepted Answer

それがあなたが求めている最初のレベルの要素だけである場合、クリックされた要素のparentNodeがルートであるかどうかを確認でき、それ以上トラバースする必要はありません。それ以外の場合は、ルートの最初の子までトラバースする必要があります。何かのようなもの：

// level0 is the root
level0.addEventListener('click', function(e) {
    var from = e.target || e.srcElement;
    from = from.parentNode === level0 ? from : findFirst(level0,from);
    /** do things **/
}, false);

// traverse up to first child of [root] 
function findFirst(root,el){
  while(true){
   el = el.parentNode;
   if (el && el.parentNode === root){
     return el;
   }
  }
  return null;  
}

上記を使用したjsfiddleのフォークは次のとおりです。

score 1 · Accepted Answer

javascriptのみを使用すると、IDを持つ最初の親要素を見つける再帰関数を使用できます。

function findParentWithId(element){
    if(element.id){
        return element;
    }

    return findParentWithId(element.parentNode);
}

次に、イベントのターゲット要素で使用します

document.getElementById('test').addEventListener('click', function(e){
    console.log(findParentWithId(e.target));alert(findParentWithId(e.target).id);
}, false);

score 1 · Accepted Answer

ここで何を聞いているのかわかりません。イベントはデフォルトでバブルを実行します（実際にはそうではなく、デフォルトでは上から下にトラバースします）。これは、3番目の引数として呼び出す.addEventListenerのが最も一般的だからです。false

eventObject.stopPropagation()停止するノードを呼び出すことで、ほとんどのイベントがさらにバブリングするのを防ぐことができます。

第1レベルの子のみを「事前フィルタリング」する場合は、委任をまったく使用しないでください.querySelectorAll。

[].forEach.call( document.querySelectorAll('#test > *'), function( node ) {
    node.addEventListener('click', function( event ) {
        alert( this.id );
    }, false);
});

これにより、からのすべての直接の子にクリックイベントリスナーがバインドされます#test。

実際の動作を参照してください：http：//jsfiddle.net/8Xmn4/

score 1 · Accepted Answer

ノードのすべての第1レベルの子への参照を取得するのは簡単です。

window.onload=function(){
    document.getElementById('test').addEventListener('click', function(e){
        return document.getElementById('test').children;
    }, false);
}

この出力は、Firebug形式で：

[a#first #, a#second #, a#third #, a#fourth #, div#div, div#div]

明らかに、それはそれぞれの子を持つ子を返しますが、最初のレベルの参照は残ります。

score 0 · Accepted Answer

0

jQuery(':first-child') use this jquery to get the first child

于 2012-08-23T17:27:10.193 に答える

javascript - 子ノードを持つ要素のJavascriptデリゲート

5 に答える 5

Related

Reference