は、イベントは次のように単純化された文書を考えると

Question

に吹き込んた要素を決定します。

<div id="outerDiv"> 
    <div id="innerDiv"> 
     <input id="theInput" /> 
    </div> 
</div> 

私は#theInputをクリックした場合、クリックイベントだろう、その後#innerDivと#outerDivまでバブル。私がしたいのは、ハンドブックを#outerDivに置いて、それらのクリックをリスンし、「バブルチェーン」を調べて、どの要素が以前にこの同じクリックイベントを受信したかを調べることです。

たとえば、のハンドラを#theInputにクリックすると、私は[#outerDiv, #innerDiv, #theInput]となります。私は#theInputの外に、まだ#innerDivの内側をクリックした場合、結果はちょうど明確にする[#outerDiv, #innerDiv]

となり、実際の文書では、このように単純ではありません、そしてそれぞれの子供や兄弟、任意の数があるかもしれませんレベル。また、#theInputを参照すると、要素自体を参照しています。つまり、IDの配列を探していません。最後に、任意の数の要素が存在する可能性があることを考慮して、中間要素に余分なハンドラを追加しないようにしたいと思います。

jQueryは私の家で歓迎です。

Answer 1

ように思える：

function myHandler(ev) { 
    var $bubbleParents = $(ev.target).parents(); 

    // ... 
} 

は、ESP、あなたが必要とするすべてです。 jQueryを使用している場合、イベントハンドラのハンドラコードに関連する要素にはthisがバインドされます。ターゲットからの親のリストは、イベントがバブル可能性のあるすべての要素を示し、this参照はそのリストの要素の1つになります。 （私はと考えています。親のリストは「内から外へ」の順ですが、私はフィドルチェックをしなければなりません）。

Answer 2

イベントオブジェクトでは、ターゲットを使用してクリック要素を見つけます。そこから、jQueryのparents（）関数を使用して、チェーン内のすべての親を見つけることができます。

var parents; 
handler = function(e){ 
// specifying the limit node in parents 
parents = $(e.target).parents("#outerDiv"); 
}; 

Answer 3

$('outerDiv').bind('click', function(e) { 
    var current = e.target; 
    var arrayClicked = new Array(); 
    arrayClicked[] = current; 
    function test() { 
     if(current.parent() == $('.outerDiv')) { 
      return arrayClicked; 
     } else { 
      arrayClicked[] = current; 
      current = current.parent(); 
      test(); 
     } 
    } 
    var yourdivs = test(); 
});