html点击空白区域消失,js如何实现点击空白处让元素消失.

参考下实现的代码~~~

在点击下拉以及选择item时阻止事件冒泡

然后为body添加一个click监听，当事件能冒泡到body时，关闭所有的pop下拉框

Title

body{

width: 100vw;

height: 100vh;

padding: 0;

margin: 0;

}

.action-bar{

position: absolute;

left:0;

top:0;

width: 100%;

height: 50px;

background-color: lightgreen;

display: flex;

justify-content: flex-start;

align-items: center;

}

.select-wrap{

width: 100px;

height: 100%;

box-sizing: border-box;

padding-top: 5px;

padding-bottom: 5px;

position: relative;

padding-right: 10px;

padding-left: 10px;

position: relative;

}

.select-span{

width: 100%;

height: 100%;

border-radius: 5px;

border: 1px solid #cccccc;

box-sizing: border-box;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

}

.select-list{

display: none;

position: absolute;

left: 10px;

top: 50px;

width: 100px;

list-style: none;

padding: 5px;

margin: 0;

border: 1px solid red;

}

.select-wrap.active ul.select-list{

display: block;

}

ul.select-list{

list-style: none;

}

ul.select-list li{

background-color: grey;

background-color: grey;

margin-bottom: 5px;

overflow: hidden;

cursor: pointer;

}

$(function(){

$(".select-wrap .select-span").on("click",function(event){

$('body').find(".select-wrap").removeClass("active");

$(this).parents(".select-wrap").toggleClass("active");

event.stopPropagation();

addCloseAllSelectPopListener();

});

$(".select-wrap ").on("click","ul.select-list li",function(event){

console.log($(this).text()+" selected ");

$('body').find(".select-wrap").removeClass("active");

event.stopPropagation();

});

function addCloseAllSelectPopListener(){

$('body').on("click",function closeEventListener(event){

$('body').find(".select-wrap").removeClass("active");

$(event.currentTarget).off("click",closeEventListener);

});

}

});

选择一个

• 1111111111
• 2222222222
• 3333333333

选择一个

• 1111111111
• 2222222222
• 3333333333