3

イベントを正しくバブリングするのに問題があります。委任されたイベントを信じています。

次のようなマークアップがあります。

<div id="wrapper">
<!-- more HTML -->
  <div class="clear">
    <a href="#">
      Clear completed <span>items</span>
    </a>
  </div>
</div>

にイベントを追加したい.clearので、 にアタッチされている委任イベント内に処理コードを配置し#wrapperます。私の問題は、イベントがバブルしていないように見えることです。言い換えると：

getElementById('wrapper').addEventListener('click', app.controller.update, true);

app.controller.update = function(e){
  console.log(e.target.nodeName) //returns either A or SPAN
  while(e.target.nodeName !== 'DIV'){
    //Infinite loop because no bubbling is happening
  }
}

アイデア？はい、要素に直接アタッチできますが、すべてのイベントを 1 つのコンテナーに保持したいと考えています。いいえ、jQuery はありません。

4

1 に答える 1

2

イベントバブリングは、子ノードで発生したイベントを親ノードで処理できることを意味します (この子ノードによってキャンセルされない場合)。

e.targetイベントのイニシエータが含まれています。したがって、クリックspanまたはaタグ付けすると、これらのタグへの参照が含まれます。クリックが開始されたかどうかを確認するには、div#clearそのようなループを試すことができます。

var el = e.target || e.srcElement;
while(el.nodeName !== 'DIV' && (el.id !== 'clear' || el.id !== 'wrapper')) 
// climb up to parent nodes until clear or wrapper is found
{
    el = el.parentNode;
}
if (el.id == 'clear')
{
    // Do smth
}
于 2012-04-10T16:09:36.013 に答える