clickイベント内での返り値と他要素との関連

クリックイベント内で、親要素のイベントがごっちゃになったり
return false; と return;の違いがよくわかっていなかったので整理。

<div id="parent">
  <div id="hoge"></div>
</div>

$(document).on('click', '#parent', function(e){
  alert('#parent');
});

$(document).on('click', '#hoge', function(e){
  // クリックした要素のイベントキャンセル
  // aタグのクリックやチェックボックスのクリックなど
  e.preventDefault();

  // 親要素への伝搬キャンセル
  e.stopPropagation();

  // e.preventDefault() + e.stopPropagation()
  return false;

  // ちなみに下記の場合は、関数の処理終了だけで
  // 要素イベントも起こるし、親要素への伝搬もする。
  return;

});