プロトタイプのオブザーバーを使用してdiv内のすべてのクリックを登録する方法

Question

クリックしてdivコンテンツを非表示にする必要がある単純なアプリケーションを作成しようとしています。スパンやリストをクリックするたびにdivがクリックを観察しないという点を除いては問題ありません。この部門内のすべてのクリックを監視するにはどうすればよいですか？

<div data-hour="16" data-minute="0" data-duration="1" class="even"> 
      <span class="title" >block:</span> <span>4:00PM</span> 
      <div> 
       <ul> 
        <li>item 1</li> 
        <li>item 2</li> 
       </ul> 
      </div> 
     </div> 


$$('#contents > div').each(function(item) { 
     item.observe('click', respondToClick); 
    }); 

Answer 1

あなたはスパンまたはリスト上のハンドラを経由してクリックをキャッチし、抑制している場合を除き、上記のコードが動作する必要があり、それがここにありません：http://jsbin.com/etuka3（observeコードがinvokeを経由して、しかし、短縮することができます。 http://jsbin.com/etuka3/2）。

ほとんどのDOMイベントは、チェーンのどこかのイベントハンドラによってバブリングがキャンセルされない限り、要素から親要素へ「バブル」しての親要素などにバブルアップします。例えば、上記のthis versionに、私はliの上clickをフックし、divに達したイベントを防ぐ：

$$('#contents > div li').invoke('observe', 'click', function(event) { 
    event.stopPropagation(); // Prevents the event from bubbling up to the ancestors 
}); 

... liをクリック意味し、divは、クリックが表示されません。しかし、あなたはちょうどあなたがthis exampleで見ることができるように、バブリング防ぐていない子要素にイベントをフック、目的にそれをしなければならない：今

$$('#contents > div li').invoke('observe', 'click', function(event) { 
    display("list item clicked"); 
}); 

を私はliをクリックしたときに、私たちがいることがわかりますliのハンドラがトリガされた後、（バブリングを止めなかったので）divのハンドラがトリガされます。