有時候 開發中會遇到這樣一個需求 點選任意地方關閉彈窗

    1.先用jq實現效果

        // 點選任意地方關閉遮罩層 除了指定區域

        $('#最大的父容器區域').bind('click', function(e) {

var e = e || window.event; //瀏覽器相容性

var elem = e.target || e.srcElement;

while (elem) { //迴圈判斷至跟節點，防止點選的是div子元素

if (elem.id && elem.id == '這裡填id就是內容部分') {

return;

}

elem = elem.parentNode;

}

$('#除了內容部分 最大的父容器中任意地方都可以關閉內容部分').hide(); //點選的不是div或其子元素

});

    2.vue實現

        存放一個公共js

 1> bind.js            

    export default { bind: function (el, binding, vNode) { el.__vueClickOutside__ = event => { if (!el.contains(event.target)) { // call method provided in v-click-outside value vNode.context[binding.expression](event) event.stopPropagation() } } document.body.addEventListener('click', el.__vueClickOutside__) }, unbind: function (el, binding, vNode) { // Remove Event Listeners document.removeEventListener('click', el.__vueClickOutside__) el.__vueClickOutside__ = null }}

2> 在頁面引入

import clickOutside from './bind.js';directives: { clickOutside // 註冊自定義事件},在內容區域新增 v-click-outside="onClickOutside" // 除了當前標籤包裹的內容 其他區域都會觸發這個事件// 全域性任意地方關閉標籤搜尋 onClickOutside() { }