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

我有另一个元素内的元素，并且都具有单独的点击功能。我想要做的是忽略或停止父元素，如果子元素具有点击功能。例如：观察具有独立点击观察功能的元素内的元素点击

<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是父之内。我想在选择子项时禁用/停止观察，但是当您在父项内部单击其他任何项时，它将按照它应该的方式工作。

谢谢。

来源

2012-01-26 fanfavorite

哇 - 原型。 –

您遇到了所谓的“事件冒泡”。除非您明确停止冒泡，否则给定元素上的事件会使DOM膨胀直到达到根节点。因为它看起来像你使用的原型，更新你的孩子的事件处理程序下面应该做的伎俩：

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

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

来源

2012-01-26 21:34:22 Amit

有趣。我认为Event.stop（e）/e.stop（）仅适用于元素。似乎很好。谢谢。 – fanfavorite

我不知道哪一个工程，但我通常使用两种：

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

而且click事件传递到的onclick功能。

来源

2012-01-26 21:31:14 Travesty3

感谢Travesty。看起来这样也会起作用。 – fanfavorite

都停止传播并取消泡泡将停止事件的传播都在一起，从我得到的是你想绕过与父母关联的事件。如果孩子被点击，我会建议在父母上使用.unbind（）。例如，

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

来源

2012-01-26 21:53:52 Rahul

我相信是jQuery。这与原型中的stopObserving类似，但这种方法的问题在于，当再次单击父项时，需要将点击观察重新放入。 – fanfavorite

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

回答

相关问题