2012-12-03 21 views
16

Rozważmy następujący fragment:Zapobieganie dziecko od wypalania zdarzenie click rodzica

<div class="div-outer"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    <div class="div-inner" style="background:red"> 
     Curabitur hendrerit vehicula erat, ut gravida orci luctus vitae. 
    </div> 
</div> 

Teraz załóżmy zewnętrzna div ma żywo click z nim związane. Jak mogę się upewnić, że live click nie zostanie wyzwolony, gdy I click w dowolnym miejscu w wewnętrznej div?

Edit:

Oto JS zgodnie z wnioskiem

$(".div-outer").live("click",function(){alert("hi")}); 

To nie powinno być triggereed po kliknięciu na ".inner-div"

+3

pisać kod js.jquery również. – ryadavilli

Odpowiedz

19

Trzeba dodać detektor zdarzeń do wewnętrznej dziecko i anuluj propagację wydarzenia.

W zwykły JS coś jak

document.getElementById('inner').addEventListner('click',function (e){ 
    e.stopPropagation(); 
}); 

jest wystarczająca. Zauważ, że jQuery provides the same facility:

$(".inner-div").click(function(event){ 
    event.stopPropagation(); 
}); 

lub

$(".inner-inner").on('click',function(event){ 
    event.stopPropagation(); 
}); 
1

można to zrobić przez dodać zdarzenie kliknij na wewnętrzny div i użyć jednej return false; lub event.stopPropagation();

$(".div-inner").click(function(){ 

    return false; 
}) 

lub

$(".div-inner").click(function(event){ 

    event.stopPropagation(); 
}) 

jsFiddle

1

Utwórz nowe click detektor wewnętrzna div i wywołać event.stopPropagation() w tym nowym wydarzeniem.

jak

$('div-outer').on('click','div-inner',function(e){ 
    e.stopPropagation(); 
}); 
+0

To, co szczególnie podoba mi się w tym rozwiązaniu, to to, że pomógł mi skonfigurować odwrotne wydarzenie: kiedy chcę wydarzenie dziecka, ale nie jego rodzica. –

0

użycie stopPropagation w swoim js plik

$(".eventclick").click(function(e) { 
    e.stopPropagation(); 
}); 
Powiązane problemy