web-dev-qa-db-ja.com

div要素をぼかす方法は？

DIV内にドロップダウンメニューがあります。

ユーザーが他の場所をクリックしたときにドロップダウンを非表示にしたい。

$('div').blur(function() { $(this).hide(); }

動かない。

.blurは<a>しかし、この場合、最も簡単な解決策は何ですか？

javascriptjqueryhtmlonblur
18
Aamir Afridi

問題は、divがonfocusoutイベントを発生させないことだと思います。本文のクリックイベントをキャプチャし、ターゲットがメニューdivである場合は、それを解決する必要があります。そうでない場合は、ユーザーが他の場所をクリックしたため、divを非表示にする必要があります。

<head>
  <script>
  $(document).ready(function(){
    $("body").click(function(e) {
      if(e.target.id !== 'menu'){
        $("#menu").hide();
      }      
    });
  });
  </script>
  <style>#menu { display: none; }</style>
</head>

<body>
  <div id="menu_button" onclick="$('#menu').show();">Menu....</div>
  <div id="menu"> <!-- Menu options here --> </div>

  <p>Other stuff</p>
</body>
16
David Henderson

Divでtabindex属性を使用してみてください。以下を参照してください：

詳細とデモについては、 this 投稿を確認してください。

21
comenk
$("body").click(function (evt) {
     var target = evt.target;
     if(target.id !== 'menuContainer'){
            $(".menu").hide();
    }                
});

divにIDを付けます（例： "menuContainer"）。次に、target.tagNameの代わりにtarget.idでチェックして、その特定のdivであることを確認できます。

5
PulledBull

最もクリーンな方法ではありませんが、ページ上のすべてのクリックイベントをキャプチャする代わりに、空のリンクをdivに追加して、divの「フォーカスプロキシ」として使用できます。

したがって、マークアップは次のように変わります。

<div><a id="focus_proxy" href="#"></a></div>

そしてあなたのJavaScriptコードはリンク上のblurイベントにフックする必要があります：

$('div > #focus_proxy').blur(function() { $('div').hide() })

Divを表示するときは、リンクにフォーカスを設定することを忘れないでください。

$('div > #focus_proxy').focus()
1
guyk

この問題が発生しました。上記のどれも問題を適切に修正できないと思いますので、ここに私の答えを投稿します。上記の回答のいくつかを組み合わせたものです。少なくとも、クリックしたポイントが同じ「id」であるかどうかを確認するだけで満たされる可能性がある2つの問題が修正されました

$("body").click(function(e) {
    var x = e.target;

    //check if the clicked point is the trigger
    if($(x).attr("class") == "floatLink"){
        $(".menu").show();
    } 
    //check if the clicked point is the children of the div you want to show 
    else if($(x).closest(".menu").length <= 0){
       $(".menu").hide();
    }
});
0
user1345344