2011-11-14 6 views
29

Jeśli do elementu HTML zostaną dołączone dwie lub więcej procedur obsługi zdarzeń, zostaną one wykonane jeden po drugim. Jednak jeśli chcesz zatrzymać późniejsze procedury obsługi zdarzeń, w oparciu o warunek sprawdzony w pierwszym module obsługi, co powinieneś zrobić?Jak zapobiec innym procedurom obsługi zdarzeń, od pierwszego handlera, w jQuery

Na przykład:

<div id='target'> 
</div> 

<p id='result'> 
</p> 

Chciałbym odwołać drugą obsługi, jeśli pierwsza obsługi jest anulowane.

$(function() { 
    var target = $('#target'), 
     result = $('#result'); 
    target.click(function(e) { 
     result.append('first handler<br />'); 
     // Here I want to cancel all subsequent event handlers 
    }); 
    target.click(function(e) { 
     result.append('second handler<br />'); 
    }); 
}); 

można zobaczyć na skrzypcach here.

PS: Wiem, że e.preventDefault() zapobiega domyślnej akcji elementu HTML (na przykład, uniemożliwia wysłanie żądania HTTP GET z powodu kliknięcia łącza), a e.preventPropagation() powoduje propagację zdarzenia do jego elementów nadrzędnych w drzewie DOM. Wiem też, że można użyć zmiennej pośredniej, ustawić ją na true w pierwszym użyciu i sprawdzić ją w kolejnych modułach obsługi. Ale chcę sprawdzić, czy istnieje bardziej zgrabne, wyrafinowane rozwiązanie tego problemu, czy nie.

Odpowiedz

43

Zobacz event.stopImmediatePropagation() - http://api.jquery.com/event.stopImmediatePropagation/

Zgodnie z docs API jQuery tej metody:

Utrzymuje resztę ładowarki przed egzekucją i zapobiega zdarzenie od propagacji górę drzewa DOM.

+0

zaktualizowałem [skrzypce] (http://jsfiddle.net/saeedneamati/pFp7P/2/), aby odzwierciedlić swoją odpowiedź. +1 i dzięki. –

1

Rozwiązanie jest specyficzne dla przeglądarki. Zobacz dojo.stopEvent:

dojo.stopEvent = function(/*Event*/ evt){ 
    // summary: 
    //  prevents propagation and clobbers the default action of the 
    //  passed event 
    // evt: Event 
    //  The event object. If omitted, window.event is used on IE. 
    if(has("dom-addeventlistener") || (evt && evt.preventDefault)){ 
     evt.preventDefault(); 
     evt.stopPropagation(); 
    }else{ 
     evt = evt || window.event; 
     evt.cancelBubble = true; 
     on._preventDefault.call(evt); 
    } 
}; 

Updated skrzypce: http://jsfiddle.net/pFp7P/1/

+0

To pytanie dotyczy jQuery – Bill

+0

To jest rozwiązanie natywne; czy to już nie działa z jQuery? – fncomp

Powiązane problemy