觀察元素中具有單獨點擊觀察功能的元素的點擊

Question

我在另一個元素中有一個元素，並且兩者都有單獨的單擊功能。 如果子元素具有點擊功能，我想做的就是忽略或停止父元素。 例如：

<div class="parent">
   <div class="child1">Child Click Function</div>
   Parent Click Function
</div>
<script type="text/javascript">
document.observe('dom:loaded',function(){
   if ($$('.parent') != undefined) {
      $$('.parent').invoke('observe','click', function(e) {    
         alert('parent');         
      });
   }
   if ($$('.child1') != undefined) {
      $$('.child1').invoke('observe','click', function(e) {    
         alert('child');         
      });
   }        
});
</script>

發生的事情是，當單擊child1時，由於child1在父對象內，因此將觸發父對象。 我想在選擇子項時禁用/停止觀察，但是當您單擊父項中的任何其他項時，它應能正常工作。

謝謝。

Answer 1

您遇到了所謂的“事件冒泡”。 除非您明確停止冒泡，否則給定元素上的事件會在DOM上冒泡，直到它們到達根節點為止。 由於您似乎正在使用原型，因此將孩子的事件處理程序更新為以下內容應該可以解決問題：

$$('.child1').invoke('observe','click', function(e) {    
    Event.stop(e);    
    alert('child');         
});

http://api.prototypejs.org/dom/Event/prototype/stop/

Answer 2

我不確定哪一種有效，但是我通常同時使用兩種：

if (event.cancelBubble)
    event.cancelBubble();
if (event.stopImmediatePropagation)
    event.stopImmediatePropagation();

並將click事件傳遞到onclick函數中。

Answer 3

停止傳播和取消氣泡都將一起停止事件的傳播，據我了解，您想繞過與父代關聯的事件。 我建議在父級上使用.unbind（），以防單擊子級。 例如，

 (CHECK CHILD CLICK) { 
 $('.parent').unbind('click');}