技術標籤：大二軟設問題集合前端jqueryjshtmljavascript

7.點選頁面內模態/彈框以外的地方，模態/彈框消失——軟設總結系列

• 7.1 事件委派的原理及作用
• 7.2 阻止事件冒泡
• 7.3 例子——點選框外，框本身消失

要解決這個問題首先要了解DOM事件流

7.1 事件委派的原理及作用

事件委派屬於事件冒泡的好處：

原理：不是給每個節點單獨是設定事件監聽器，而是將事件監聽器設定再其父結點上，然後利用冒泡原理影響設定每個子節點
作用：只操作了一次DOM，提高了程式的效能

7.2 阻止事件冒泡

利用事件物件裡面的stopPropagation()方法

7.3 例子——點選框外，框本身消失

以div為’框’，點選div以外區域，div消失，點選出現按鈕，div出現

效果圖如下：
程式碼如下：

 	div {
            width: 200px;
            height: 200px;
            margin-top: 10px;
            background-color: bisque;
            box-shadow: 0px 0px 10px 5px #ccc; /* 給div設定陰影*/
        }

    <button class='show'>出現</button>
    <
 
button class="hide">消失</button>
    <div></div>

原生js程式碼：（因為我是用jQuery寫的，但是考慮到可能有些同伴可能看不習慣jq，就也用原生再寫了一遍，下面也有jq程式碼哦~習慣看jq的也能小滑到下面看jq程式碼）

        var body = document.body;
        var div = document.querySelector('div');
        var btnShow = document.querySelector('.show'
 
);
        
        //點選body，div消失
        body.addEventListener('click', function() {
            div.style.display = 'none';
        })

		//點選div，阻止body的div消失的事件
        div.addEventListener('click', function(e) {
            e.stopPropagation();
        })

		//點擊出現按鈕，阻止body的div消失事件，且令div出現
        btnShow.addEventListener('click', function(e) {
            e.stopPropagation();
            div.style.display = 'block';
        })

jQuery程式碼：

        $(function() {  //點選body，div消失
            $('body').on({
                click: function() {
                    $('div').hide();
                }
            })
            $('div').on({  //點選div，阻止body的div消失的事件
                click: function(e) {
                    e.stopPropagation();
                }
            })
            $('.show').on({  //點擊出現按鈕，阻止body的div消失事件，且令div出現
                click: function(e) {
                    e.stopPropagation();
                    $('div').show();
                }
            })
        })