Наблюдение за щелчком элемента внутри элемента, который имеет отдельную функцию наблюдения за щелчком

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 находится внутри parent. Я хотел бы отключить / остановить наблюдение, когда выбран дочерний элемент, но когда вы нажимаете на что-либо еще внутри родительского элемента, он работает как следует.

Спасибо.

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