jQueryで子要素をクリックしているのに親要素のイベントが起きちゃうバグを防ぐ（バブリングの伝播制御）

jeryで、クリック時のイベントを定義していたのですが、

・テーブルの行全体を押すと、データの詳細画面へ遷移する

・行の中にある削除ボタンを押すと、削除確認画面へ遷移する

という形になっていたところ、削除ボタンを押しても詳細画面へとぶ・・・なぜ・・・ということで半日ほど悩みました。

if文で、!$('button')　とかもしてみたところ、うまく行ったかに思えました。

・・・が、なんとbuttonタグの部分をクリックすれば削除確認画面へ遷移するのですが、そのbuttonタグの中のspanタグのところをクリックするとまたしても詳細画面に飛んでしまう・・・orz

まじかよ・・・

cssでz-index設定してbuttonを前に出せばいいよ、というアドバイスを得てやってみたものの、z-indexは聞いているのにclickイベントはさっきのまま・・・orz

結論としては、バブリングの、子要素から親要素へのイベントの伝播を止める、という術を施してことなきを得ました・・・！

親要素のイベントを記述した後に、

子要素を押した時は「イベント実行したらあかんよ」という命令を付け加えればOKです。

↓↓

$('button').click(function(e){
event.stopPropagation();
});

そして、未来の私がまた同じバグに行き当たった時の道しるべに記録します〜

以上。