我正在尝试创建一个简单的应用程序,需要在单击时隐藏和显示 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);
});
最佳答案
除非您通过范围或列表上的处理程序捕获并抑制点击,否则上面的代码应该可以正常工作,并且在这里: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
的处理程序被触发。
关于javascript - 如何使用原型(prototype)的观察注册 div 内的每次点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4236692/