子要素のイベント後、親要素のイベントも発生してしまう

Jqueryを用いて、クリックした要素のイベントだけを発生させたいのですが、
親要素にハンドリングしてあるクリックイベントも子→親の順番で発生してしまいます。
親のイベントを発生させない方法はありますか？よろしければご教示ください。
コード例は下記になります。

【html】
`

<div> <input type="button"/> </div> `

【js】
`

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

Jqueryでのイベント作成では、イベントは子から親要素へ伝わる仕様となっております。
この現象を「イベントバブリング」といいます。
ツリー構造を見るとわかりやすいですが、子を包含している親要素が対象となります。

下記の場合、#child1のクリックイベントが発生した場合、親要素である<tr><table><body>
にクリックイベントをバインドしていた場合発生してしまいます。
#child2、#tr2は枝分かれしたツリーなので発生しません。
`

<body>←発生 <table>←発生 <tr id="tr1">←発生 <td id="child1">←クリック </td> </tr> <tr id="tr2">←発生しない <td id="child2">←発生しない </td> </tr> </table> </body> ` 当現象を避けるにはクリックしたイベントオブジェクトの「stopPropagation」を使用します

`
例）

$('div').bind('click',function(e){
console.log("親です");
});

$('div :input').bind('click',function(e){
console.log("子供です");
e.stopPropagation();　←バブリング停止
});
`

このようにすれば、親へのバブリングを止めることができます。

注意）この例はあくまでJqueryを用いてバインドしたイベントのみの話になります。
JavascriptのaddEventListenerなどでバインドしている場合、
親要素へのバブリングのみではなく「イベントキャプチャリング→イベント→イベントバブリング」
という流れになりますのでご注意を。

1→7の順番にイベントが流れます

<body>←キャプチャリング1　バブリング7 <table>←キャプチャリング2　バブリング6 <tr id="tr1">←キャプチャリング3　バブリング5 <td id="child1">←クリック4 </td> </tr> </table> </body> `

投稿2014/05/26 01:01