javascript - jquery 在 div 外单击时关闭 div

Question

实际上我得到的是：http: //jsfiddle.net/y9uwY/7/

我想要的是：

1. 如果用户点击黑色区域，那么什么都不会发生
2. 在黑色区域外点击必须关闭

Answer 1

试试这个小提琴，你的body标签只会是主.select_roles元素的大小，所以将宽度和高度设置为 100% 为你提供了一个可点击的隐藏区域（这在 msot 浏览器中有效，允许更多，可能是也值得添加一些填充）。这只是设置为.select_roles，display:none;但从类开始，.active一旦display:block;您在我们删除.active类的区域之外单击，就可以了。

小提琴：http: //jsfiddle.net/y9uwY/3/

Answer 2

现在试试小提琴 http://jsfiddle.net/y9uwY/9/

$('.select_roles').click(function (e){
    e.stopPropagation();
                 if($(this).hasClass('active')){
                 }
                 });

            $('body').click(function (){
                 if($('.select_roles').hasClass('active')){
                     $('.select_roles').removeClass('active');
                 }
            });

Answer 3

你必须阻止事件冒泡到正文。这是更正后的代码http://jsfiddle.net/y9uwY/8/

供参考和进一步阅读：什么是事件冒泡和捕获？