以外のすべてをクリック

Question

オプション、ヘルプ、ログアウトでメニューを開いたときに、facebookのような効果を作りたいと思います。このように動作します。

そのメニュー以外のページをクリックすると、どこでも閉じることができます。 私はこの

$("body").not("#myMenu").click(function() { 
    // hide menu 
}); 

試してみましたが、それは非表示になりますので、これは私がそれをクリックしていたときにメニューが非表示になり、失敗しました。何が問題なのか、それを解決する方法は？

これを処理する方法は他にもありますか？

Answer 1

私はこの記事があなたを助けるべきだと思う：

How do I detect a click outside an element?

をキーはstopPropagation()です。

Answer 2

ボディのすべての要素にイベントハンドラを追加すると、非常に過度になります。私はzオーダー10でコンテンツの上にDIVオーバーレイを使用し、zオーダー20でウィンドウを上に置きます。DIVオーバーレイ上の単一のイベントハンドラが必要です。ブラウザウィンドウ。

Answer 3

Ben Alman’s jQuery clickoutside pluginを使用できます。例：あなたはむしろプラグインを使用したくない場合

// Hide the modal dialog when someone clicks outside of it. 
$("#modal").bind("clickoutside", function(event){ 
    $(this).hide(); 
}); 

、あなたはevent.stopPropagation()as described hereを使用して、それを自分で行うことができます。

Answer 4

$('#requireddiv').hover(function(){ 
      mouse_is_inside=true; 
     }, function(){ 
      mouse_is_inside=false; 
     }); 
$("body").mouseup(function(){ 
     if(mouse_is_inside == false) { 
      $('#requireddiv').hide(); 
     } 

    }); 

これを使用して作業しました。基本的には、エリア上にあるかどうか、マウスボタンがクリックされていないときはマウスがそのエリア内にあるかどうかをチェックし、そうでなければこのdivを非表示にします。