javascript - 如何使用原型(prototype)的观察注册 div 内的每次点击

Question

我正在尝试创建一个简单的应用程序，需要在单击时隐藏和显示 div 内容。一切都很好，除了每当我单击跨度或列表时，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 (不过，通过 invoke: http://jsbin.com/etuka3/2 可以缩短 observe 代码)。

我相信您知道，大多数 DOM 事件都会从元素“冒泡”到其父元素，再到其父元素等，除非冒泡被某处的事件处理程序取消在链中。例如，在this version中在上面的内容中，我将 click 挂接到 li 上，并防止事件到达 div:

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

...这意味着单击 li，div 看不到单击。但您必须故意这样做，仅在子元素上 Hook 事件并不能防止冒泡，正如您在 this example 中看到的那样:

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

现在，当我单击 li 时，我们可以看到 li 的处理程序被触发，然后(因为我没有停止冒泡)div 的处理程序被触发。