<div v-clickoutside="clickEventspace">点击我不会触发事件,点击我的外部触发事件</div>
export default {
//实现点击div元素外出发事件
directives: {
clickoutside: {
bind: function(el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false;
}
if (binding.expression) {
binding.value(e);
}
}
el.__vueClickOutside__ = documentHandler;
document.addEventListener("click", documentHandler);
},
unbind: function(el, binding) {
document.removeEventListener("click", el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
},
},
methods : {
clickEventspace() {
console.log("点击了div元素外");
},
},
}
版权声明:《 clickoutside指令,点击容器外触发事件 》为胡光喆原创文章,转载请注明出处!
最后编辑:2023-7-27 11:07:20