触发子和父涟漪答案

【问题标题】：Child and parent ripple triggered触发子和父涟漪
【发布时间】：2019-06-29 09:56:40
【问题描述】：

我正在使用 vuetify 设计一个“卡片”组件。

我有一个带有子按钮的父 div。现在，当我单击按钮时，会触发 div 上的波纹效果。

我该如何解决这个问题？

<template>

  <div>

    <v-card v-ripple="true">
      <h3>
        <v-card-title>{{ title }}</v-card-title>
      </h3>

      <v-layout row>
        <v-flex grow>
          <v-card-text>
            {{ plaats }}
            <br />
            {{ sub_title }}
          </v-card-text>
        </v-flex>

        <v-flex shrink>
          <v-card-actions>

            <v-btn small color="blue" fab>
              <v-icon medium color="white">mdi-calendar</v-icon>
            </v-btn>

            <v-btn small color="green" fab>
              <v-icon medium color="white">mdi-calendar-check</v-icon>
            </v-btn>

            <v-btn small color="red" fab>
              <v-icon medium color="white">mdi-calendar-remove</v-icon>
            </v-btn>

          </v-card-actions>
        </v-flex>

      </v-layout>
    </v-card>

  </div>

</template>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

解决方案确实是Event.stopPropagation，但我不得不将它添加到mousedown 操作中。所以@mousedown.stop 然后像@Frank 之前提到的那样用@click.stop="null" 添加你的函数。

【讨论】：

也可以考虑在触摸设备上将@touchstart.stop 添加到Event.stopPropagation。

【解决方案2】：

注意 @mousedown 事件不会在移动设备上触发，因此我们还需要添加@touchstart。

Codepen

<v-list>
  <v-list-tile :ripple="true" @click="">

    <v-list-tile-action>
      <v-btn 
          @click.stop="" 
          @mousedown.stop="" 
          @touchstart.stop=""
      >Click</v-btn>
    </v-list-tile-action>

    <v-list-tile-content class="pl-5">
      Click tile
    </v-list-tile-content>

  </v-list-tile>
</v-list>

【讨论】：

【解决方案3】：

您正在寻找Event.stopPropagation。将@click.stop="null" 添加到您的按钮。当然你可以/应该用你自己的方法替换null。

【讨论】：

这对涟漪效应不起作用。已经试过了。还是谢谢
你能添加一个工作示例吗？我尝试重新创建您的问题，但没有成功。

【解决方案4】：

如果您的 vuetify css 是独立的，而不是在您的 app.js 中，对我有用的解决方案是将 app.js 脚本放在正文之外，当它在 js 内部时，它比 vuetify css 先加载。

<!-- ripple error occurs randomly -->
  <script src="{{ URL::asset('js/vLib.js') }}" defer></script> 
</body>


<!-- Should be outside the body -->
</body>
  <script src="{{ URL::asset('js/vLib.js') }}" defer></script>

【讨论】：