观察具有单独点击-观察功能的元素中元素的点击

Observing click of element within element that has a separate click observe function

本文关键字：元素 观察 单独点 功能      更新时间：2023-09-26

我在另一个元素中有一个元素，两者都有单独的点击功能。如果子元素具有单击功能，我想忽略或停止父元素。例如：

<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在parent中，所以该项和parent都会被触发。我想在选择子对象时禁用/停止观察，但当您单击父对象内的任何其他对象时，它会正常工作。

谢谢。

您遇到了所谓的"事件冒泡"。给定元素上的事件在DOM中冒泡，直到它们到达根节点，除非显式停止冒泡。由于看起来像是在使用Prototype，因此将孩子的事件处理程序更新为以下内容就可以了：

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

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

我不确定哪一个有效，但我通常同时使用：

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

并将click事件传递到onclick函数中。

停止传播和取消气泡都将一起停止事件的传播，从我得到的是，你想绕过与父级相关联的事件。我建议在父对象上使用.unbind（），以防单击子对象。例如，

 (CHECK CHILD CLICK) { 
 $('.parent').unbind('click');}
相关文章：