javascript - stopPropagation（）ただし、他のクリックイベントはアクティブのままにします

Question

メニューを閉じるためのjQueryコードがいくつかあります。

$('body').click(function(){
  $('#menu').hide();
});
$("#menu").click(function(e) {
  e.stopPropagation();
  return false;       
});

ただし、＃menu要素には、クリックイベントが付加された要素がいくつかあります。

$('.menu_elem').live("click", function(){
  //Do something
});

私の問題は、e.stopPropagation（）がメニューのクリックイベントを妨げていることです。どうすればこれを回避できますか？

score 2 · Accepted Answer

e.targetを使用して、stopPropagationの条件で要素を含めたり除外したりできます。

$("#menu").click(function(e) {
   if(e.target.id == "menu")
   {
     e.stopPropagation();
     return false;       
   }
});

score 1 · Accepted Answer

HTMLを正確に理解しているかどうかはわかりませんが、が#menuメニューのルートであり、メニューの.menu_elemメニュー項目である場合は、委任されたイベント処理を次のようにキャプチャする#menuように変更できます。

$("#menu").on("click", ".menu_elem", function () {
   // do something
});

これには次の利点があります。

委任されたイベント処理を変更して、バブルされたイベントをキャプチャするため、動作するために#menuそれを超えて伝播する必要がないため、コード#menuを変更する必要がありません。.stopPropagation()
これは（現在は非推奨）.live()から置き換えに切り替わり.on()、バブルされたイベントがキャプチャされる場所をより細かく制御できるようになります。

score 0 · Accepted Answer

stopPropagationを呼び出す前に、実行するコードを記述して呼び出します。

$("#menu").click(function(e) {

// Your code here
  e.stopPropagation();
  return false;       
});

または、target属性を使用してクリックイベントを含めます

3 に答える 3