I am facing an issue with a div containing a mouseenter event and a button inside it with a click event. The concept is that when the user hovers over the div triggering the mouseenter event, the div becomes "active", allowing the button to be visible and clickable.
Everything works perfectly on desktop, but on mobile devices, because of the mouseenter event, clicking where the button should appear while the div is inactive results in accidentally clicking the button itself.
I want to prevent users from mistakenly clicking the button when they intend to activate the div. I believe this can be resolved using event handling techniques described here: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers, but I am struggling to implement it successfully.
You can view the codepen example at the following URL: https://codepen.io/jameshine/pen/GRNNzdq or see the code snippet below.
Note: If you test this on a desktop and click the button, you will still receive the "clicked by mistake" error message. This codepen is optimized for mobile views, but I'm unsure if I can replicate the problem accurately on mobile devices.
<div id="app">
<div class="container mx-auto">
<div class="flex -mx-2">
<div class="w-1/2 px-2" @mouseenter="activate(key)" v-for="(item, key) in items" :key="key">
<div class="h-full p-5 rounded-lg" :class="[ active === key ? 'bg-yellow-500' : 'bg-gray-300']">
<div class="mb-10">
<p>{{ item.name }}</p>
</div>
<button class="bg-red-500 px-3 py-2 rounded" @click="alert('I\'ve been clicked by mistake')" v-if="active === key">Activate Me</button>
</div>
</div>
</div>
</div>
</div>
new Vue({
el: "#app",
data() {
return {
active: undefined,
items: [
{
name: "A"
},
{
name: "B"
}
]
};
},
methods: {
activate(key) {
this.active = key;
}
}
});