判斷頁面的點擊事件是否發生在某元素上

 

本文地址：https://www.cnblogs.com/veinyin/p/10999265.html 

 

有時我們需要判斷頁面的點擊事件是否發生在某元素上

使用場景如  自己實現下拉框  點擊頁面其它地方時下拉部分隱藏

下面代碼為 vue 場景下

// template 中
div(ref="myDiv")

// created 中添加 click 事件句柄  判斷點擊事件是否發生在某元素上
document.addEventListener('click', event => {
    const e = event || window.event
    if (this.$refs.myDiv && !this.$refs.myDiv.contains(e.target)) {
        console.log('not in myDiv')
    }
})

 

如果是非全局組件  需要在 beforeDestroy 中移除事件句柄  

此時需要在 methods 中寫一個具名函數   第二個參數為該函數名

// 添加事件句柄
created() {
    document.addEventListener('click', myFunc)
},

// 移除事件句柄
beforeDestroy () {
    document.removeEventListener('click', myFunc)
},

// 相應函數
methods: {
    myFunc(event) {
        // 同上
    } 
}

 

 

 

END~~~≥ω≤