隐藏元素点击

Question

$(document).on('click','body', function(e){ 
 
     if(e.target == $('.moreOptionsMenu')){ 
 
     return false; 
 
     }else{ 
 
     $('.moreOptionsMenu').remove(); 
 
     } 
 
}); 
 

 
$(document).on('click','.fa.fa-bars.moreOptions', function(e){ 
 
e.stopPropagation(); 
 
    $('body').append('<div class="moreOptionsMenu">something</div>'); 
 
});

.moreOptionsMenu{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
} 
 
.moreOptions{ 
 
    width: 50px; 
 
    height: 50px; 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fa fa-bars moreOptions"></div>

我有一些问题，在身体上点击删除一些元素，但其中目标不是上或其他一些因素：

$(document).on('click','body', function(e){ 
     if(e.target !== $('.moreOptionsMenu') && e.target !== $('.fa.fa-bars.moreOptions')){ 
     $('.moreOptionsMenu').remove(); 
     } 
}); 

$(document).on('click','.fa.fa-bars.moreOptions', function(e){ 
    $('body').append('<div class="moreOptionsMenu">something</div>'); 
}); 

当我点击.fa.fa-bars.moreOptions我追加.moreOptionsMenu，我想删除.moreOptionsMenu当我点击任何地方，但它或.fa.fa-bars.moreOptions。

随着上面的代码，它是每次删除它。

Answer 1

您是否尝试过使用e.stopPropagation（）从冒泡中停止事件。例如：

$(document).on('click','.fa.fa-bars.moreOptions', function(e){ 
    e.stopPropagation(); 
    $('body').append('<div class="moreOptionsMenu">something</div>'); 
});