イベント伝播

 伝播テスト
 

id=child-button をクリックした場合のイベント伝播は、

1. id=child-button のクリックイベント
2. id＝parent-div のクリックイベント

と動作します。

id=child-buttonのクリックイベントで、stopPropagation()　を使用すると

1. id=child-button のクリックイベント
2. 終わり（id＝parent-div のクリックイベントは呼ばれない）

id=child-checkboxのクリックイベントで、preventDefault()　を使用すると

1. id=child-button のクリックイベント。要素が持つイベントは、キャンセルされる
2. id＝parent-div のクリックイベント

要素のイベントをキャンセルするため、永遠にチェックすることができません。

 $('#parent-div').on('click',function(){
　 alert("parent-div : click");
 });
 
 $('#child-button').on('click', function(event){
　 // イベント伝播を中止する（親のイベントは発火しない）
　 event.stopPropagation();
 
　 alert("child-button : click");
 });
 
 $('#child-checkbox').on('click', function(event){
　 // 要素が持つイベントをキャンセル（チェックさせない）
　 event.preventDefault();
 
　 alert("child-checkbox : click"); 
 });