質問: Jqueryを用いて、クリックした要素のイベントだけを発生させたいのですが、 親要素にハンドリングしてあるクリックイベントも子→親の順番で発生してしまいます。 親のイベントを発生させない方法はありますか?よろしければご教示ください。 コード例は下記になります。 【html】 ``` ``` 【js】 ``` ``` よろしくお願いいたします。
回答: **Jqueryでのイベント作成では、イベントは子から親要素へ伝わる仕様となっております。** **この現象を「イベントバブリング」といいます。** **ツリー構造を見るとわかりやすいですが、子を包含している親要素が対象となります。** 下記の場合、#child1のクリックイベントが発生した場合、親要素である にクリックイベントをバインドしていた場合発生してしまいます。 #child2、#tr2は枝分かれしたツリーなので発生しません。 ``` ←発生 ←発生 ←発生 ←クリック ←発生しない ←発生しない ``` 当現象を避けるにはクリックしたイベントオブジェクトの「stopPropagation」を使用します ``` 例) $('div').bind('click',function(e){ console.log("親です"); }); $('div :input').bind('click',function(e){ console.log("子供です"); e.stopPropagation(); ←バブリング停止 }); ``` このようにすれば、親へのバブリングを止めることができます。 注意)この例はあくまでJqueryを用いてバインドしたイベントのみの話になります。 JavascriptのaddEventListenerなどでバインドしている場合、 親要素へのバブリングのみではなく「イベントキャプチャリング→イベント→イベントバブリング」 という流れになりますのでご注意を。 1→7の順番にイベントが流れます ``` ←キャプチャリング1 バブリング7 ←キャプチャリング2 バブリング6 ←キャプチャリング3 バブリング5 ←クリック4 ```