代码片段►JavaScript

JS实现点击空白处隐藏元素

适用场景：

  • 自定义的下拉选择，点击空白自动隐藏
  • 侧边栏点击空白隐藏
  • …

首先，阻止事件冒泡代码：

1
2
3
4
5
6
7
8
9
//阻止事件冒泡
function stopPropagation(e) {
    var ev = e  window.event;
    if (ev.stopPropagation) {
        ev.stopPropagation();
    } else if (window.event) {
        window.event.cancelBubble = true; //兼容IE
    }
}

点击事件代码：

1
2
3
4
xxx.onclick = () => {
    stopPropagation();
    ...
}

监听点击事件代码：

1
2
3
4
5
6
7
document.addEventListener("click", function (e) {
    //e.target获取点击的元素
    //实现原理，判断点击的不是指定元素时执行
    if(e.target !== xxx) {
        ...
    }
});

点击侧边栏会导致事件冒泡，点击元素内部会隐藏侧边栏
解决方法：

1
2
3
4
监听侧边栏点击事件，阻止事件冒泡
xxx.addEventListener("click" (e) => {
    stopPropagation();
})