vue.js - Vuejs单击修饰符不适用于具有单击事件的另一个元素内的元素

Question

我有一个button带有click="buttonMethod()"事件card的dblclick="cardMethod()"事件。

问题

我需要阻止所有按钮单击传播到父级（卡），但是.stop修饰符.prevent不起作用，单击按钮会触发这两种方法。

在下面的演示中，您甚至可以看到从按钮传播到卡片的点击（出现波纹）

• 在按钮上使用click.stop.prevent没有帮助。
• 在卡片上使用dblclick.self也无济于事，因为它可以防止点击所有孩子，甚至是文本，这是不可取的。

代码

演示：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>

标签： vue.js

Answer 1

解决方案

我会将@dblclick 事件从父 v-card 中取出，并将其仅放在您希望可点击的区域中。在这种情况下，div 包含按钮旁边的所有内容。

<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>