在 div 外部单击后删除类答案

【问题标题】：Remove class after click outside the div在 div 外部单击后删除类
【发布时间】：2014-12-27 15:07:17
【问题描述】：

我知道这是一个老问题，但我搜索了很多。在喜欢的正文之外单击后，我想删除课程。这是我的代码：
Html

   <div id="user-login-top">Enter</div>
   <div id="user-login-wrapper" class="">visible</div>

jQuery

$(function () {
    $("#user-login-top").on("click", function () {
        $("#user-login-wrapper").addClass("wide");
    });
    $(document).on("click", function (e) {
        if ($(e.target).is("#user-login-wrapper") === false) {
            $("#user-login-wrapper").removeClass("wide");
        }
    });
});

这是小提琴：Fiddle

感谢您的帮助！？
谢谢

【问题讨论】：

jsfiddle.net/32bitkid/7f32byhn/2
thx @MohitArora 成功了，你应该回答它，我会联系你的 ;)
接受的答案也很好:)

标签： javascript jquery html jquery-ui

【解决方案1】：

是因为事件的传播。

当您单击user-login-top 时，会触发第一个单击句柄，即添加类，然后由于事件传播，附加到文档的处理程序在满足 if 条件并删除类的地方被触发。

这里一种可能的解决方案是使用event.stopPropagation()

$(function() {
  $("#user-login-top").on("click", function(e) {
    $("#user-login-wrapper").addClass("wide");
    e.stopPropagation()
  });
  $(document).on("click", function(e) {
    if ($(e.target).is("#user-login-wrapper") === false) {
      $("#user-login-wrapper").removeClass("wide");
    }
  });
});

#user-login-wrapper {
  opacity: 0;
}
#user-login-wrapper.wide {
  opacity: 1 !important;
}

<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible</div>

另一个是

$(function() {
  $("#user-login-top").on("click", function(e) {
    $("#user-login-wrapper").toggleClass("wide");
  });
  $(document).on("click", function(e) {
    if ($(e.target).is("#user-login-wrapper, #user-login-top") === false) {
      $("#user-login-wrapper").removeClass("wide");
    }
  });
});

#user-login-wrapper {
  opacity: 0;
}
#user-login-wrapper.wide {
  opacity: 1 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible</div>

【讨论】：

就我而言，只有当我在第一次单击时将事件设置为 stopPropagation() 时它才有效，否则它根本不起作用。