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冒泡，直到它们到达根节点。因为看起来你正在使用Prototype，所以将孩子的事件处理程序更新为以下内容应该可以解决问题：

$$('.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');}

观察具有单独的单击观察功能的元素内的元素的单击

3 个答案: