Удалить класс, когда div не нажал (onclick not true)

Question

Я пишу небольшой код JQuery/JS, чтобы создать некоторое взаимодействие в моем приложении. Я работаю с div, который будет другим цветом, если я нажму на него. Затем, если я снова нажму на него (он проверяет, у div есть класс, который обеспечит цвет), он появится в модальном режиме. Но теперь я хотел бы удалить цвет, если я нажму ничего, кроме div. Итак, div серый, когда я нажимаю на него, он станет желтым, и после того, как я нажму на другое, он снова станет серым. Я думал, что-то вроде, если ДИВ получил класс "clicked" и нажмите не так на DIV, он удалит класс "clicked" Мой код:

$(".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

Для удаления clicked класса Вам необходимо приложить обработчик щелчка по документу и проверить 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

Используйте этот код для проверки нажмите вне нужного документа ..

$(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