隱藏元素點擊

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>'); 
});