ドキュメントのクリックと要素のクリックのハンドルの衝突

Question

私は要素のクリックに基づいて非表示にして表示するドロップダウンを持っています。ただし、ドキュメントの他の場所をクリックすると、このドロップダウンが表示されている間は非表示にしたい

これは、ドロップダウン・コードです：

function dropdown(){ 
    $('#smenubutton').click(function(e){ 
     var submenu = $(this).find('.submenu'); 

     if (submenu.is(':visible')){ 
      submenu.hide(); 
     }else{ 
      submenu.show(); 
     } 
    }); 
} 

しかし、このようなコード：

$(document).click(function(e){ 
      e.stopPropagation(); 
      $('.submenu').hide(); 
     }); 

は明らかに常にサブメニューを非表示になります。両方ともドキュメントの読み込み中に読み込まれます。私はちょうどとても単純なものが欠けていることを知っている。私は重複している（私は検索を試みましたが、私のニーズに基づいて質問を見つけることができませんでした）ことを指摘し、この質問を閉じます。

Answer 1

あなたはe.targetがサブメニューであるかどうかを確認し、それはあなたが「ブラウザの外」に述べたので

$(document).click(function(e){ 
      if($(e.target).hasClass("submenu")){ 
       $('.submenu').hide(); 
      } 
     }); 

Answer 2

はblur()またはfocusout()にしてみてください：

$('#smenubutton').blur(function(){ submenu.hide(); }); 
// OR 
$('#smenubutton').focusout(function(){ submenu.hide(); }); 

それはあなたのメニューに明示的なtabindexを与えてみてください動作しない場合。

Answer 3

（このケースでは、私はそれがクラスのサブメニューを持っているかどうかを確認）ではない場合にのみ、サブメニューを非表示にしますこれを試してください：http://www.thefutureoftheweb.com/blog/detect-browser-window-focus

EDIT：

$(document).on('click', '#submenu', function(e) { 
    e.stopPropagation(); 
    // show or hide the submenu here 
}); 
$(document).on('click', function(e) { 
    // hide submenu here 
}); 

例：OPは質問を編集しているので、私は答えを編集します： http://jsfiddle.net/A3SfP/