Jak zabráním tomu, aby se událost onclick rodiče spustila při kliknutí na podřízenou kotvu?

V současné době používám jQuery k tomu, aby bylo možné kliknout na div a v tomto divu mám také kotvy. Problém, na který narážím, je ten, že když kliknu na kotvu, spustí se obě události kliknutí (pro div i kotvu). Jak zabráním spuštění události onclick prvku div při kliknutí na kotvu?

Zde je poškozený kód:

JavaScript

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

HTML

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

Odpověď

Události probublávají do nejvyššího bodu v DOM, ke kterému byla připojena událost kliknutí. Takže ve vašem příkladu, i když jste v prvku div neměli žádné další explicitně klikatelné prvky, každý podřízený prvek prvku div by svou událost kliknutí probublával po DOM, dokud to obslužný program události kliknutí prvku DIV nezachytil.

Existují dvě řešení, a to zkontrolovat, kdo vlastně událost způsobil. jQuery předává objekt eventargs spolu s událostí:

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

Ke svým odkazům můžete také připojit obslužnou rutinu události kliknutí, která jim řekne, aby zastavily bublání události poté, co se spustí jejich vlastní obslužná rutina:

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});