Ignoruj ​​Parent zdarzenie onClick gdy element podrzędny kliknięciu

Question

Proszę zobaczyć - http://www.bootply.com/dR7fxjP1bk

Klikając dowolny z div.rows (nazwijmy to rodzica), zdarzenie onClick jest aktywna, w celach demonstracyjnych powiadomienie wyskakuje.

W rzędzie akordeon zwija się, gdy kliknięte jest "info" (pomarańczowy przycisk) (pozwala zadzwonić do tego dziecka), ale problem polega na tym, że rodzice ostrzegają o wyzwalaczach.

Potrzebuję przycisku informacyjnego, aby nie uruchamiać alertu, tylko wtedy, gdy kliknięto nigdzie indziej, pojawi się alert.

Próbowałem różnych sposobów, takich jak przy użyciu (e) stopPropagation .on .off połączeń itp ... Nie jestem najlepszym facetem jquery, więc potrzebujesz trochę pomocy, aby to działało - i także pomóż mi się nauczyć czegoś !

<div class="row ticket-selector" onclick="alert('Hello World!');"> 
    <a data-toggle="collapse" data-parent="#ticket-panel" href="#collapseOne" class="tickets-more"><span class="halflings info-sign orange"></span></a> 
</div> 

Powyższe jist - ale patrz na lepsze zrozumienie - http://www.bootply.com/dR7fxjP1bk

Answer 1

Chodzi o to, aby usunąć onclick="" obsługi oszczędność swoją wartość w innej dziedzinie, a następnie wykonać (ocena) wartości w zwyczaju click obsługi zdarzeń:

Example code.

$(document).ready(function() 
{ 
    var elements = $(".ticket-selector"); 
    elements.each(function() 
    { 
     var handler = $(this).attr('onclick'); 
     $(this).data('click', handler); 
    }); 
    elements.attr('onclick', ''); 
    elements.click(function(e) 
    { 
     if (!$(e.target).hasClass("info-sign")) 
     { 
      eval($(this).data('click')); 
     } 
    }); 
}); 

Answer 2

wziąć klasę informacji z div. Owiń je obiema kolejnymi czystymi elementami div.

Answer 3

W pomarańczowym przycisku obsługi kliknij dodać return false; na końcu - zapobiegnie to zdeformowaniu wydarzenia z rodzicem. Podobnie jak to:

jQuery('.tickets-more').click(function(){ 
    // your stuff here 
    return false; 
}); 

Answer 4

Jeśli nie używasz klas css, możesz sprawdzić klikane atrybuty/klasy elementów. Podobnie jak:

$('.parent-element').on('click',function(e){ 
if ($(this).attr('data-toggle')){//has attribute data-toggle 
e.preventDefault(); 
return false; 
} 
}); 

To będzie zależało od twojego drzewa DOM nieco więcej. Można znaleźć warunek, który będzie wyłączyć dowolne zdarzenie

Answer 5

sprawdzić demo roboczego HERE

myślę, że należy użyć Event.stopPropagation() jQuery API i można go używać jako

$(document).ready(function(){ 
    $('.tickets-more').click(function(event){ 
     // your stuff here 
     alert("Alert On Click"); 
     event.stopPropagation(); 
    }); 
}); 

event.stopPropagation() zatrzymaj bulgotanie zdarzeń, przed którymi stoisz. Dla dalszej dokumentacji odnoszą FROM HERE

Nadzieja to pomaga ...

Answer 6

użyć CSS:

pointer-events: none; 

uczyni odpowiednie elementy całkowicie przezroczysty dla zdarzeń myszy.