如何使用原型的观察记录div中的每次点击

Question

I am trying to create a simple application that needs to hide and show div content on click. It fine except for the fact that any time I click on a span or the list, the div doesn't observe a click. What is the best way to observe all the clicks within this 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

Unless you're catching and suppressing the clicks via handlers on the span or list, your code above should be working, and it does here: http://jsbin.com/etuka3 (That observe code can be shortened, though, via invoke : http://jsbin.com/etuka3/2 ).

As I'm sure you know, most DOM events "bubble" up from an element to its parent element to its parent element, etc., unless the bubbling is cancelled by an event handler somewhere in the chain. For instance, in this version of the above, I hook click on the li s and prevent the event reaching the div :

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

...which means clicking an li , the div doesn't see the click. But you have to do that on purpose, just hooking an event on a child element does not prevent bubbling, as you can see in this example :

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

Now when I click an li , we can see that the li 's handler gets triggered, and then (because I didn't stop bubbling), the div 's handler gets triggered.