未单击 div 时删除类（onclick 不正确）答案

【问题标题】：Remove class when a div is not clicked (onclick not true)未单击 div 时删除类（onclick 不正确）
【发布时间】：2016-12-19 12:22:40
【问题描述】：

我正在编写一个小的 JQuery/JS 代码来在我的应用程序中创建一些交互。我正在使用一个 div，如果我点击它，它将是不同的颜色。然后，如果我再次单击它（它检查 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 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>

【问题讨论】：

请添加相关的HTML代码。
完成，这是具体的div

标签： javascript jquery html css onclick

【解决方案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>

【讨论】：

【解决方案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

【讨论】：