Entfernen Sie die Klasse, wenn auf ein div nicht geklickt wird (onclick nicht true)

Question

Ich schreibe einen kleinen JQuery/JS-Code, um eine Interaktion in meiner Anwendung zu erstellen. Ich arbeite mit einem div, der eine andere Farbe hat, wenn ich darauf klicke. Dann, wenn ich es nochmal anklicke (es prüft das div hat die Klasse, die die Farbe liefert), wird es ein modales Pop-up erscheinen. Aber jetzt möchte ich die Farbe entfernen, wenn ich etwas anderes als das div. Also, das div ist grau, wenn ich darauf klicke, wird es gelb und nachdem ich auf etwas anderes geklickt habe, muss es wieder grau werden. Ich dachte, so etwas wie, wenn das div die Klasse bekam "clicked" und ist der Klick auf das div nicht wahr, es wird die Klasse "clicked" Mein Code entfernen:

$(".progressDefault").click(function(){ 
    if ($(".progressDefault").hasClass("clicked")) { 
    $('#myModal').modal('show'); 
    } 
    if ($ (".progressDefault").hasClass("clicked") && $(".progressDefault").onclick == false) { 
    $('.progressDefault').removeClass('clicked'); 
    } 
    $(this).toggleClass('clicked'); 
}); 

HTML Div

<div class="progress-bar progressDefault" role="progressbar" aria-valuenow="25"` aria-valuemin="0" aria-valuemax="100" style="width: 25%;"> 
    <span class="sr-only">25%</span> 
</div> 

Answer 1

Zum Entfernen clicked Klasse Sie müssen Click-Handler auf dem Dokument anhängen und prüfen, ob e.target

$(".progressDefault").click(function(){ 
 
    if ($(this).hasClass("clicked")) { 
 
     alert('show modal'); 
 
    }else{ 
 
     $(this).addClass('clicked'); 
 
    } 
 
    }); 
 
$(document).click(function(e){ 
 
    if(!$('.progressDefault').is(e.target) && $('.progressDefault').has(e.target).length === 0){// if div is not target nor its descendant 
 
    $('.progressDefault').removeClass('clicked'); 
 
    } 
 
});

.progressDefault{ 
 
    border:1px solid black; 
 
    width:50px; 
 
    height:50px; 
 
    padding:10px; 
 
    background:grey; 
 
} 
 
.clicked{ 
 
    background:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class='progressDefault'>test</div>

Answer 2

Verwenden Sie diesen Code auf eine Stelle außerhalb des gewünschten Dokuments zu überprüfen ..

$(document).mouseup(function (e) { 
    var container = $(".progressDefault"); 
    if (!container.is(e.target) && container.has(e.target).length === 0) { 
    /* if the target of the click isn't the container && nor a descendant of the container */ 
     $('.progressDefault').removeClass('clicked'); 
    } 
}); 

DEMO