原生js怎样利用事件冒泡让这个div消失?

Question

当这个div是显示的时候 点击页面任意其它地方让这个div消失 原生js应该怎么写呢 对前端不熟 我记得以前看别人说过好像在else里面加一句让事件冒泡的话 然后在onclick外面给body加一个点击事件 具体代码我忘了 我搜索半天也没有找到方法 求大家指教

var oMenu=document.getElementById('dropdown');
var oBtn1=document.getElementById('btn1');
oBtn1.onclick=function(){
   var dis=window.getComputedStyle(oMenu).getPropertyValue("display"); 
   if(dis=="none"){
         oMenu.style.display="block";
   }else{
         oMenu.style.display="none";
   }
}

Answer 1

谢邀！

我们可以换个思路，阻止事件冒泡：给btn和div的点击事件加上 e.stopPropagation()

html:

<button id="showBtn">显示隐藏div</button>
<div id="divSelf" style="display:block; width: 200px; height: 200px; background-color:#b11;"></div>

js:

var divSelf = document.getElementById('divSelf');
var hasShow = true;

document.onclick = function() {
    divSelf.style.display = 'none';
    hasShow = false;
};

document.getElementById('showBtn').onclick = function(e) {
    divSelf.style.display = hasShow ? 'none': 'block';
    hasShow = !hasShow;
    e.stopPropagation(); //阻止事件冒泡
};

divSelf.onclick = function(e) {
    e.stopPropagation();
};

Answer 2

不一定非要阻止冒泡的，事件捕获也可以呀。

我不确定你的html怎么写的，应该是点击按钮显示dropdown，点击其他隐藏dropdown吧。

https://jsfiddle.net/2aejujqd/

<div id="dropdown"></div>
    <button id="btn1">显示</button>

    var oMenu = document.getElementById('dropdown');
    var oBtn1 = document.getElementById('btn1');
    document.addEventListener('click', function (event) {
        var dis = oMenu.style == 'none' ? 'none' : 'block';
        if (event.target == oMenu && dis == 'block') {
            return false;
        } else if (event.target == oBtn1) {
            oMenu.style.display = 'block';
        } else {
            oMenu.style.display = 'none';
        }

    });

Answer 3

假如我们有一个鼠标点击展开的下拉菜单，下拉菜单阻止事件冒泡，其他区域不阻止事件冒泡。 这样就能很轻松的知道点击的是不是下拉菜单之外的区域， 如果是之外的区域就关闭下拉菜单， 下面就是一个惨不忍睹的简易DOME。

<div id="dropdown">
    下拉菜单
    <ul style="display: none">
        <li>菜单一</li>
    </ul>
</div>
<p>点击可以关闭</p>
<script>
    document.getElementById('dropdown').addEventListener('click', function (event) {
        var display = dropdown.childNodes[1].style.display;
        dropdown.childNodes[1].style.display = display === 'block' ? 'none' : 'block';
        event.stopPropagation();
    });

    document.body.addEventListener('click', function (event) {
        dropdown.childNodes[1].style.display = 'none';
    })
</script>

当然实际项目实现中肯定没有这么简单， 很多其他元素也绑定了各种各样的事件， 也可能有阻止冒泡等行为，所以要在项目里面实现这个功能会更加复杂， 所以大部分的库都有封装一个这样的功能 ， 学术名叫 “clickoutside” 你可以了解一下。

Answer 4

onclick事件应该绑定到body元素上，这样body子元素的click事件通过冒泡机制就能传播到body的click事件中。

Answer 5

跟冒泡没关系，大概是这么个思路：

var oMenu=document.getElementById('dropdown');
document.addEventListener('click', function(e){
    if(oMenu.contains(e.target)){
        return null
    }
    oMenu.style.display="none";
});