[解決済み] 子アンカーがクリックされたときに、親のonclickイベントが発生しないようにするにはどうすればよいですか？

質問

現在、jQueryを使ってdivをクリックできるようにし、そのdivの中にアンカーも置いています。問題は、アンカーをクリックすると、両方のクリックイベントが発生することです（divとアンカー）。アンカーがクリックされたときにdivのonclickイベントが発火するのを防ぐにはどうすればよいですか？

以下は、壊れたコードです。

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>

解決方法は？

イベントは、クリックイベントがアタッチされた DOM の最も高いポイントにバブルします。つまり、この例では、div の中に明示的にクリックできる要素がなかったとしても、div のすべての子要素は、DIV のクリックイベントハンドラがそれを捕らえるまで、DOM 上でクリックイベントをバブル化することになるのです。

jQueryはイベントと一緒にeventargsオブジェクトを渡します。

$("#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;
});

また、リンクにクリックイベントハンドラを添付して、リンクに イベントバブリングを停止する を実行した後、そのハンドラを実行します。

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