javascript - jQuery - hide dropdown when DOM element is focused

Question

i got to show a dropdown menu, now i would like to hide that when anoher element (not dropdown or dropdown's children) in the DOM is focused.

(hide dropdpown when element !== dropdown||dropdown's childrens is focused in the DOM)

i tryed with focusout() with no results:

$('a').on('click',function(){
        $('.drop.user-menu').fadeIn(); 
});

$('.drop.user-menu').on('focusout',function(){
        $(this).fadeOut();
        alert('antani');
});

any idea?

jsfiddle here : example

Answer 1

event.target()在这种情况下会很有用：

$('.drop.user-menu').on('focusout',function(e){
    if(e.target !== this){
      $(this).fadeOut();
      alert('antani');
    }
});

---

更新：

检查一下，看看是否有帮助：

 $('.a').on('click', function (e) {
     e.stopPropagation();
     $('.drop.user-menu').fadeToggle();
 });
 $('.drop.user-menu').on('click', function (e) {
     e.stopPropagation();
     $('.drop.user-menu').fadeIn();
 });
 $(document).on('click', function (e) {
    if (e.target !== $('.drop.user-menu') && e.target !== $('.a')) {
       $('.drop.user-menu').fadeOut();
    }
 });

上面的脚本在这个小提琴中点击完成

Answer 2

DIV 不能获取或失去焦点（除非它具有tabindex）。你必须给它一个tabindex或添加一个可聚焦的元素到你的div.drop.user-menu. 请参阅哪些 HTML 元素可以接收焦点？.

然后，您还必须明确地赋予该元素（或其中的元素）焦点（使用.focus()），因为简单地将其淡入并不会赋予它焦点。

当元素模糊时，检查新的活动元素是否仍然是菜单的一部分。如果不是，请淡出菜单。

请参阅一个工作示例。

Answer 3

没有触发focus或focusout触发事件，因为您没有在表单字段上进行操作。

这可能是您想要的：如何检测元素外的点击？

var menu = $('.drop.user-menu');
menu.on('click',function(e){
    e.stopPropagation();  // stop clicks on menu from bubbling to document
});
$('a').on('click', function (e) {
    menu.fadeIn();
    e.stopPropagation(); // stop clicks on <a> from bubbling to document
});
$(document).on('click',function(e){
    // any other click
    if (menu.is(":visible")) {
        menu.fadeOut();
    }
});

http://jsfiddle.net/BBxEN/10/

---

更新

正如 Derek 所指出的，这对键盘用户来说不是很友好。考虑为用户实现一种使用键盘快捷键打开和关闭菜单的方法。

Answer 4

你可以用模糊 tru，是你想要的吗？
尝试这个：

$('.drop.user-menu').on('blur',function(){
   $(this).fadeOut();
   alert('antani');
});