CODEWITHSUNDEEP
vue.js
AlekseyHoffman
AlekseyHoffman

Reputation: 2694

Vuejs click modifiers don't work on an element inside of another element with click events

I have a button with a click="buttonMethod()" event inside of a card with a dblclick="cardMethod()" event.

Problem

I need to stop all the button clicks from propagating into the parent (card), but .stop and .prevent modifiers don't work, clicking on the button triggers both methods.

In the demo below, you can even see the clicks propagating from the button into the card (ripples appear)

Code

DEMO: https://codepen.io/AlekseiHoffman/pen/LYVKeBE?editors=1011

<v-card @dblclick="cardMethod()" v-ripple>
  <div>
    <h2>Title</h2>
    <h3>Description</h3>
  </div>
  <v-btn @click.stop.prevent="buttonMethod()">
    button
  </v-btn>
</v-card>

Upvotes: 0

Views: 1218

Answers (3)

AlekseyHoffman
AlekseyHoffman

Reputation: 2694

I found the solution. I just added @dblclick.stop.prevent="" to the button:

<v-card @dblclick="cardMethod()" v-ripple>
  <div>
    <h2>Title</h2>
    <h3>Description</h3>
  </div>
  <v-btn @dblclick.stop.prevent="" @click.stop.prevent="buttonMethod()">
    button
  </v-btn>
</v-card>

Upvotes: 2

Syed
Syed

Reputation: 16513

I have hack rather proper solution:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods: {
    cardMethod () {
      console.log('cardMethod')
    },
    buttonMethod () {
      console.log('buttonMethod')
    }
  }
})
.custom-card .v-card__actions { position: absolute; left: 0; bottom: 0 }
.pb-52 { padding-bottom: 52px !important}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-card class="custom-card elevation-8" max-width="344">
          <v-card-text @dblclick="cardMethod()" v-ripple class="pb-52">
            <h2>Title</h2>
            <h3>Description</h3>
          </v-card-text>
          <v-card-actions>
            <v-btn @click="buttonMethod()" dark color="blue">Button</v-btn>
          </v-card-actions>
        </v-card>
      </v-container>
    </v-content>
  </v-app>
</div>

Upvotes: 1

Darjusch
Darjusch

Reputation: 188

Solution

I would take the @dblclick event out of the parent v-card and put it only in the area that you want to be clickable. In this case the div which contains everything beside the button.

<div id="app">
  <v-app id="inspire">
    <h1>See events in the console</h1>
    <v-card v-ripple class="card elevation-8">
      <div @dblclick="cardMethod()">
        <h2>Title</h2>
        <h3>Description</h3>
      </div>
      <v-btn @click.prevent.stop="buttonMethod()" dark color="blue">
        button
      </v-btn>
    </v-card>
  </v-app>
</div>

Upvotes: 1

Related Questions