clickoutside: {
bind(el, binding, vnode) {
function handleClickOutside(e) {
console.log('e.target', e.target);
if (e.target === el || el.contains(e.target) || e.target.closest('.ignore')) {
return
}
binding.value(e)
}
el.__vueClickOutside__ = handleClickOutside
document.addEventListener('click', handleClickOutside)
},
unbind(el) {
document.removeEventListener('click', el.__vueClickOutside__)
delete el.__vueClickOutside__
}
}
使用方式
<div class="outer">
<div class="ignore"></div>
<div class="inner" v-clickoutside="doSome"></div>
<div>
当我们点击.inner
之外的div时,将会触发v-clickoutside
绑定的doSome
事件,
但是inner
上方有一个带着.ignore
的div当点击这个div时,不会触发doSome事件