js如何實(shí)現(xiàn)點(diǎn)擊空白處讓元素消失.

項(xiàng)目中自己寫下拉框時(shí),常常會(huì)有這樣的需求;
點(diǎn)擊下拉框時(shí),下拉框里面的內(nèi)容顯示;
點(diǎn)擊除了下框之外的其他地方,下拉框要關(guān)閉;
我是這樣寫的

 <div class="select-wrap">
        <div class="select-span">
            <span>選擇一個(gè)</span>
        </div>
        <ul class="select-list">
            <li>1111111111</li>
            <li>2222222222</li>
            <li>3333333333</li>
        </ul>
    </div>
    //點(diǎn)擊打開點(diǎn)擊關(guān)閉
    $(".select-wrap .select-span").click(function(){
        $(".select-wrap .select-list").slideToggle();
    });
    //下拉框里面的選中事件
    $(".select-wrap .select-list li").on('click', function (e) {
        e.stopPropagation();
        $(this).parents('.select-wrap').find('span').html($(this).html());
        $(this).parents('.select-wrap').find('.select-list').slideUp();
        $(".select-wrap1 .select-list").slideDown('fast', 'swing');
    })
    //點(diǎn)擊空白處,下拉框消失的代碼
    $(document).click(function(e) {
        var target = $(e.target);
        if(target.closest(".select-wrap").length == 0) {
           $(".select-wrap .select-list").slideUp();  
        };
    });

上面這樣寫看著沒什么問題,但是如果有兩個(gè)一樣的下拉框,(一摸一樣,包括類名,通過循環(huán)創(chuàng)建的,不確定會(huì)有多少個(gè)這樣的下拉框)

    <div class="select-wrap">
        <div class="select-span">
            <span>選擇一個(gè)</span>
        </div>
        <ul class="select-list">
            <li>1111111111</li>
            <li>2222222222</li>
            <li>3333333333</li>
        </ul>
    </div>
    <div class="select-wrap">
        <div class="select-span">
            <span>選擇一個(gè)</span>
        </div>
        <ul class="select-list">
            <li>1111111111</li>
            <li>2222222222</li>
            <li>3333333333</li>
        </ul>
    </div>

這樣就會(huì)有問題;

請問各位大佬,平時(shí)都是怎么寫這個(gè)需求的啊…

回答

編輯回答

遲月

在下拉框點(diǎn)擊事件的事件處理函數(shù)中給body(這個(gè)body得要夠大，太小的話直接綁到document上也還行吧)添加一個(gè)一次性的點(diǎn)擊事件用來隱藏下拉框

偽代碼
document.body.addEventListener("click",hideSelect,{once:true})

2.在下拉框點(diǎn)擊事件處理函數(shù)(就在上面那坨代碼下寫就行) 和下拉框彈出的內(nèi)容上的點(diǎn)擊事件處理函數(shù) 里面添加阻止冒泡
偽代碼
e.stopPropagation

這應(yīng)該算簡單的了吧

下拉框?yàn)槭裁床挥胹elect 這樣你就不用糾結(jié)這個(gè)了
可以在你這個(gè)下拉框和其他內(nèi)容間來一個(gè)透明遮罩層當(dāng)開啟下拉框時(shí)就讓這個(gè)這遮罩層出現(xiàn) 在遮罩層綁定點(diǎn)擊事件點(diǎn)擊它就關(guān)掉下拉框然后去掉該遮罩層

我還是覺得用select簡單粗暴?

2018年9月13日 16:58

編輯回答

葬愛

之前用過的

// 點(diǎn)擊列表以外任何地方，隱藏列表
    $(document).mouseup(function(e){
      var _con = $(shareMean);   // 目標(biāo)區(qū)域
      if(!_con.is(e.target) && _con.has(e.target).length === 0){ 
        shareMean.hide();
      }
    });

2017年8月28日 16:23

編輯回答

貓小柒

事件冒泡不可以嗎

2017年5月18日 21:28

編輯回答

笑浮塵

你把有問題的圖或者BUG也列出來啊

2018年7月3日 14:08

編輯回答

薄荷糖

做一個(gè)透明遮罩，給這個(gè)遮罩添加點(diǎn)擊事件

2018年3月21日 17:10

編輯回答

命于你

參考下實(shí)現(xiàn)的代碼~~~
在點(diǎn)擊下拉以及選擇item時(shí)阻止事件冒泡
然后為body添加一個(gè)click監(jiān)聽，當(dāng)事件能冒泡到body時(shí)，關(guān)閉所有的pop下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        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;
        }
    </style>
    
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        $(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);
                });

            }
        });
    </script>
   
</head>
<body>
    <div class="action-bar">
        <div class="select-wrap">
            <div class="select-span">
                <span>選擇一個(gè)</span>
            </div>
            <ul class="select-list">
                <li>1111111111</li>
                <li>2222222222</li>
                <li>3333333333</li>
            </ul>
        </div>

        <div class="select-wrap">
            <div class="select-span">
                <span>選擇一個(gè)</span>
            </div>
            <ul class="select-list">
                <li>1111111111</li>
                <li>2222222222</li>
                <li>3333333333</li>
            </ul>
        </div>

    </div>


</body>
</html>

2017年6月16日 17:07

編輯回答