blocks|key|1481110|text|.click在div标签中可以很好地工作。只需确保您没有超出select元素的范围。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1481111|$('div').click(function(e)+{
++++var+$target+=+$(e.target);
++++if+(!$target.is("select"))+{+$(this).hide()+};
});|code-block|syntax|javascript|1481112|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>.click will work just fine inside the div tag. Just make sure you're not over top of the select element.</p>

<pre><code>$('div').click(function(e) {
    var $target = $(e.target);
    if (!$target.is("select")) { $(this).hide() };
});
</code></pre>


blocks|key|1266531|text|我认为问题在于div不会触发onfocusout事件。您需要捕获主体上的单击事件，然后确定目标是否为menu+div。如果不是，那么用户已经在其他地方单击了，并且需要隐藏div。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1266532|<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">++</div>

++<p>Other+stuff</p>
</body>|code-block|syntax|javascript|1266533|entityMap^0|E|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>I think the issue is that divs don't fire the <code>onfocusout</code> event. You'll need to capture click events on the body and then work out if the target was then menu div. If it wasn't, then the user has clicked elsewhere and the div needs to be hidden.</p>

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

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

  &lt;p&gt;Other stuff&lt;/p&gt;
&lt;/body&gt;
</code></pre>


blocks|key|1481189|text|$("body").click(function+(evt)+{
+++++var+target+=+evt.target;
+++++if(target.id+!==+'menuContainer'){
++++++++++++$(".menu").hide();
++++}++++++++++++++++
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1481190|给div一个id，例如"menuContainer“。然后你可以通过target.id而不是target.tagName来检查，以确保它是特定的div。|unstyled|1481191|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$("body").click(function (evt) {
     var target = evt.target;
     if(target.id !== 'menuContainer'){
            $(".menu").hide();
    }                
});
</code></pre>

<p>give the div an id, for instance "menuContainer". then you can check by target.id instead of target.tagName to make sure its that specific div.</p>


blocks|key|1481218|text|尝试在div上使用tabindex属性，请参见：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1481219|有关更多信息和演示，请查看this帖子。|offset|length|1481220|entityMap|0|LINK|mutability|MUTABLE|url|http://www.barryvan.com.au/2009/01/onfocus-and-onblur-for-divs-in-fx/^0|0|D|4|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>Try using tabindex attribute on your div, see:</p>

<p>Check <a href="http://www.barryvan.com.au/2009/01/onfocus-and-onblur-for-divs-in-fx/">this</a> post for more information and demo.</p>


blocks|key|1266632|text|这不是最干净的方式，但你可以在div中添加一个空链接，并将其用作div的“焦点代理”，而不是捕获页面上的每个单击事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1266633|因此，您的标记将更改为：|1266634|<div><a+id="focus_proxy"+href="#"></a></div>|code-block|syntax|javascript|1266635|你的Javascript代码应该挂接到链接上的blur事件：|1266636|$('div+>+#focus_proxy').blur(function()+{+$('div').hide()+})|1266637|在显示div时，不要忘记将焦点设置在链接上：|1266638|$('div+>+#focus_proxy').focus()|1266639|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Not the cleanest way, but instead of capturing every click event on the page you could add an empty link to your div and use it as a "focus proxy" for the div.</p>

<p>So your markup will change to:</p>

<pre><code>&lt;div&gt;&lt;a id="focus_proxy" href="#"&gt;&lt;/a&gt;&lt;/div&gt;
</code></pre>

<p>and your Javascript code should hook to the blur event on the link:</p>

<pre><code>$('div &gt; #focus_proxy').blur(function() { $('div').hide() })
</code></pre>

<p>Don't forget to set the focus on the link when you show the div:</p>

<pre><code>$('div &gt; #focus_proxy').focus()
</code></pre>


blocks|key|1266646|text|我刚刚遇到了这个问题。我猜以上这些都不能很好地解决这个问题，所以我在这里发布了我的答案。这是上面一些答案的组合:至少它解决了两个问题，只要检查点击的点是否是相同的"id“就可以解决。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1266647|$("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();
++++}
});|code-block|syntax|javascript|1266648|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I just encountered this problem.
I guess none of the above can fix the problem properly, so I post my answer here. It's a combination of some of the above answers:
at least it fixed 2 problems that one might met by just check if the clicked point is the same "id"</p>

<pre><code>$("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 &lt;= 0){
       $(".menu").hide();
    }
});
</code></pre>


<p>I have a dropdown menu inside a DIV.</p>

<p>I want the dropdown to be hide when user click anywhere else.</p>

<pre><code>$('div').blur(function() { $(this).hide(); }
</code></pre>

<p>is not working.</p>

<p>I know .blur works only with <code>&lt;a&gt;</code> but in this case what is the simplest solution?</p>


How to blur the div element?

我在DIV里有一个下拉菜单。我希望下拉菜单是隐藏的，当用户点击任何其他地方。$('div').blur(function() { $(this).hide(); }不起作用。我知道.blur只适用于<a>，但在这种情况下，最简单的解决方案是什么？

问如何模糊div元素？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何模糊div元素？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何模糊div元素？
EN