例えば、メニューボタンを押すとメニューが開き、もう一度押すと閉じるというようなトグルボタンを設置する時、メニューを開いた状態で画面のどこかをクリックすると、メニューが閉じるという仕様になっている事が多い。
そこで自分も、そういう仕様を実装しようと、bodyなどにクリック判定をつけて、画面のどこかをクリックした時メニューを閉じるように実装した。
しかしこれでは、メニューボタンを押したとき、親要素のbodyのクリック判定が反応してしまい、メニューボタンが開かないという現象があった。
解決方法
メニューボタン要素が押された時、クリックイベントが親要素に伝播しないようにする。
$(document).on( 'touchstart click','#menu', function(e){
e.stopPropagation();
});