码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-06-10 18:49:48      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:link   col   span   OLE   com   contains   场景   omega   editor   

 

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

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

标签:link   col   span   OLE   com   contains   场景   omega   editor   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!