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

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

 <div class="select-wrap">
        <div class="select-span">
            <span>選擇一個</span>
        </div>
        <ul class="select-list">
            <li>1111111111</li>
            <li>2222222222</li>
            <li>3333333333</li>
        </ul>
    </div>
    //點擊打開點擊關(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');
    })
    //點擊空白處,下拉框消失的代碼
    $(document).click(function(e) {
        var target = $(e.target);
        if(target.closest(".select-wrap").length == 0) {
           $(".select-wrap .select-list").slideUp();  
        };
    });

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

    <div class="select-wrap">
        <div class="select-span">
            <span>選擇一個</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>選擇一個</span>
        </div>
        <ul class="select-list">
            <li>1111111111</li>
            <li>2222222222</li>
            <li>3333333333</li>
        </ul>
    </div>

這樣就會有問題;

請問各位大佬,平時都是怎么寫這個需求的啊…

回答

編輯回答

遲月

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

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

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

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

下拉框為什么不用select 這樣你就不用糾結(jié)這個了
可以在你這個下拉框和其他內(nèi)容間來一個透明遮罩層當開啟下拉框時就讓這個這遮罩層出現(xiàn) 在遮罩層綁定點擊事件點擊它就關(guān)掉下拉框然后去掉該遮罩層

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

2018年9月13日 16:58

編輯回答

葬愛

之前用過的

// 點擊列表以外任何地方，隱藏列表
    $(document).mouseup(function(e){
      var _con = $(shareMean);   // 目標區(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

編輯回答

薄荷糖

做一個透明遮罩，給這個遮罩添加點擊事件

2018年3月21日 17:10

編輯回答

命于你

參考下實現(xiàn)的代碼~~~
在點擊下拉以及選擇item時阻止事件冒泡
然后為body添加一個click監(jiān)聽，當事件能冒泡到body時，關(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>選擇一個</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>選擇一個</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

編輯回答