jQueryで親要素へのイベント伝播を防ぐ

jQueryでクリックイベントを設定する際、以下のように子要素と親要素両方にイベントを設定すると、子→親の順にイベントが走る。 これを イベントバブリング と呼ぶらしい。

<tr>
    <td>Test</td>
<td>

jQuery(function($) {
  $('tr').click(function(e){
    alert('tr click');
  });
  $('td').click(function(e){
    alert('td click');
  });
});

子要素のイベントだけ発生させ、親要素のイベントは発生させたくない。そんなときは stopPropagation() を使うことで、子から親への伝播を止めることができる。

jQuery(function($) {
  $('tr').click(function(e){
    alert('tr click');
  });
  $('td').click(function(e){
    alert('td click');
    // 親へのイベントの伝播を止める
    e.stopPropagation();
  });
});

こんな感じで。