Prevent event bubbling in Vue
I found that using the 'stop' event modifier on the child element worked for me.eg
<div id="app"> <div id="largeArea" @click="do_X"> <button @click.stop="do_Y">Button</button> </div></div>
From the documentation, use the self event modifier to only capture events originating on the element itself.
<div id="largeArea" v-on:click.self="do_X">new Vue({ el: '#app', methods: { do_X () { console.log(Date.now(), 'do_X') } }})#largeArea { padding: 20px; border: 1px solid black;}<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script><div id="app"> <div id="largeArea" @click.self="do_X"> <button>Button</button> </div></div>
Prevent bubbling for all clicks inside a container <div>
<div @click.stop="" class="action"> <button @click="someClickAction1()">Action 1</button> <button @click="someClickAction2()">Action 2</button><div>Prevent bubbling on an existing click action
<button @click.stop="someClickAction()">Single Action</button>