javascript - jQuery - 当 DOM 元素获得焦点时隐藏下拉菜单

Question

我必须显示一个下拉菜单，现在我想在 DOM 中的另一个元素(不是下拉菜单或下拉菜单的子元素)获得焦点时隐藏它。

(当元素 !== dropdown||dropdown 的子元素聚焦在 DOM 中时隐藏 dropdpown)

我尝试了 focusout() 但没有结果:

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

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

有什么想法吗？

jsfiddle 在这里: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();
    }
 });

The above script done with click in this fiddle