判断页面的点击事件是否发生在某元素上

Posted 2022-01-02 veinyin

 

本文地址：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~~~≥ω≤