I am currently facing an issue with identifying clicks outside of my element, which happens to be a speed dial item from Vuetify. To address this problem, I have been using directives based on a solution found in this article: Detect click outside element. While I have managed to detect clicks outside and log them successfully, I also encounter the 'clicked outside' log when clicking inside the element. How can I prevent the directive from registering clicks within the element as well? Despite attempting event bubbling or propagation prevention, the issue persists. Any suggestions would be greatly appreciated. Thank you!
<template>
<v-card>
<v-speed-dial
v-click_outside="outside"
:bottom="true"
:right="true"
:direction="direction"
:transition="transition"
fixed
>
<template v-slot:activator>
<v-btn
:class="{ is_active: isActive }"
color="red"
fab
@click="toggleButton"
dark
x-large
>
<span v-if="isActive"><v-icon>mdi-pencil</v-icon></span>
<v-icon v-else>mdi-plus </v-icon>
</v-btn>
</template>
<v-btn
fab
dark
large
color="white"
@click.stop="$emit('scrollTo')">
<v-icon color="#F0BE85">mdi-delete</v-icon>
</v-btn>
</v-speed-dial>
</v-card>
</template>
<script>
export default {
name: 'FloatingButton',
props: {
display: Boolean,
ott: Boolean,
preroll: Boolean,
gt: Boolean
},
data: () => ({
direction: 'top',
fab: false,
right: true,
bottom: true,
transition: 'scale-transition',
isActive: false,
backgroundColor: false
}),
methods: {
toggleButton: function () {
this.isActive = !this.isActive
this.backgroundColor = !this.backgroundColor
},
outside:function(){
console.log('clicked outside')
}
},
directives: {
click_outside:{
bind:function(el,binding,vnode){
el.clickOutsideEvent=function(event){
if (!(el == event.target || el.contains(event.target))) {
vnode.context[binding.expression](event);
}
}
document.body.addEventListener('click',el.clickOutsideEvent)
}
},
unbind:function(el){
document.body.removeEventListener('click',el.clickOutsideEvent)
}
}
}
</script>