【JavaScript】クリックイベントが親要素に伝播しないようにする方法

例えば、メニューボタンを押すとメニューが開き、もう一度押すと閉じるというようなトグルボタンを設置する時、メニューを開いた状態で画面のどこかをクリックすると、メニューが閉じるという仕様になっている事が多い。

そこで自分も、そういう仕様を実装しようと、bodyなどにクリック判定をつけて、画面のどこかをクリックした時メニューを閉じるように実装した。

しかしこれでは、メニューボタンを押したとき、親要素のbodyのクリック判定が反応してしまい、メニューボタンが開かないという現象があった。

解決方法

メニューボタン要素が押された時、クリックイベントが親要素に伝播しないようにする。

$(document).on( 'touchstart click','#menu', function(e){
	e.stopPropagation();
});