javascript - js如何获取一个div以外的所有地方？

Question

<ul>
    <li></li>
    <p class="a" id="second-tag-p1">
        <p class="b"></b>
    </p>
</ul>

这里有个js，点击 li 元素，ul 增加 class，a 增加class，b增加class， 如何获取a以外的所有地方，这个好像阻止冒泡不合适，应该点击其他地方 remove掉增加的class。

// 关闭弹窗

$(document).mouseup(function(e){
    var _con = $('#second-tag-p1');   // 设置目标区域
          if(!_con.is(e.target) && _con.has(e.target).length === 0){ 
            $('.secondary-tag-container').removeClass('second-tag-p-active');
            $('.sidebar').removeClass('z-index100');
            $('.secondary-content').removeClass('display-block');
      };
});

其实这样已经达到了点击目标区域之外的地方关闭弹窗，只不过，因为点击li，然后对应增加class,当开启弹窗的时候，再点击li,完成了一次关闭弹窗又再次打开的操作，所以看上去点击当前对应li无效。

现在该怎么修改，它不是冲突，也不是错误，是运行了关闭操作，接着运行了打开操作。

Answer 1

可以看一下类似的问题：
点击空白关闭弹窗的js写法推荐？ https://segmentfault.com/q/1010000000452...

下面是我自己写的, 判断是否点击的不是目标元素或目标元素的后代元素

document.onmouseup = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    var _tar = //获取你的目标元素
    //1. 点击事件的对象不是目标区域本身
    //2. 事件对象同时也不是目标区域的子元素
    if( !(target == _tar) && ! _tar.contains(target) ){
        //你的功能
    } else {
        //你的功能
    }
}

Answer 2

这个有点类似弹出层点击空白隐藏，给个粗略的伪代码给你：

// 在 a 上绑定 mouseup 事件，当触发时缓存事件的 timeStamp:
var clickATimeStamp;
doc.querySelector('.a').addEventListner('mouseup', function(e) {
    clickATimeStamp = e.timeStamp;
});

// 在 a 以外的地方（且为 body 也可以是 ul）也绑上 mouseup 事件
doc.querySelector('body').addEventListner('mouseup', function(e) {
    if (clickATimeStamp === e.timeStamp) {
        // 点在了 a 上
    } else {
        // 点在 a 以外
    }
});

Answer 3

我猜你应该是想增加什么样式吧 ， b 可以不用添加 class了，移除所有的class的话就判断吧。获取所有的class类,然后不包含a的就移除；

var names = document.querySelectors('className') ;
for(var name in names){
  if(name[0].className.indexOf('className')!==-1){
    //移除你的class
  }
}  

Answer 4

然后循环，排除掉不要的标签

Answer 5

ul标签里规定只能放li标签，这里不应该出现p，可以使用CSS3的not选择器

Answer 6

只需要增加ul一个class就够了，不必那么麻烦每个都添加一个新类，因为你在写css时通过后代选择器来影响到a和b。

.ul-add .a {
}
.ul-add .a .b {
}

只有在ul上新添加的类ul-add存在时，上面的选择器才会生效。

Answer 7

$(document.body).not(".a).click(handle)

Answer 8

如果题主的意思是判断点击的是不是目标元素或目标元素的后代元素的话，其实不用那么麻烦。
@EyEder 。node节点有个contains方法，可以判断某个节点是不是他的后代，返回布尔值。mdn
效果看这里