如何避免@click 仅在一个 child 组件上

Question

例如，如果我点击所有 v-card，我将重定向到另一个 link，但是如果我点击标题 World of the Day，并且只点击 title我什么也不想做。如何避免在点击 title 时被重定向？

template>
  <v-card
    class="mx-auto"
    max-width="344"
    @click="goToAnOtherLink"
  >
    <v-card-text>
      <div>Word of the Day</div>
      <p class="display-1 text--primary">
        be•nev•o•lent
      </p>
      <p>adjective</p>
      <div class="text--primary">
        well meaning and kindly.<br>
        "a benevolent smile"
      </div>
    </v-card-text>
    <v-card-actions>
      <v-btn
        text
        color="deep-purple accent-4"
      >
        Learn More
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

Answer 1

您可以将 v-card 包裹在 div 中，并使用绝对定位来放置标题；这样标题就在 v-card 的 "front" 中，因此点击它什么都不做。

Pseudo-code

<div>
   <span>Word of the day</span> <!-- use absolute to position inside the div -->
   <v-card></v-card>
</div>

Answer 2

在标题 div 中也添加一个 class，并在函数 goToAnOtherLink 中检查事件目标的 classes。然后您可以使用 stopPropagation() 以及该函数中的自定义代码。

new Vue({
  el: "#app",
  data() {},
  methods: {
    goToAnOtherLink(e) {
      if (e.target.classList.contains("title") || e.target.classList.contains("display-1")) {
        e.stopPropagation()
        console.log("Cancelled Navigation!")
      } else {
        console.log("Navigated!")
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-card class="mx-auto" max-width="344" @click="goToAnOtherLink">
      <v-card-text>
        <div class="title">Word of the Day</div>
        <p class="display-1 text--primary">
          be•nev•o•lent
        </p>
        <p>adjective</p>
        <div class="text--primary">
          well meaning and kindly.<br> "a benevolent smile"
        </div>
      </v-card-text>
      <v-card-actions>
        <v-btn text color="deep-purple accent-4">
          Learn More
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</div>

Answer 3

如果仅 title，请使用 stop 事件修饰符。这比方法中的逻辑更容易。

<v-app>
    <v-card class="mx-auto" max-width="344" @click="goToAnOtherLink">
        <v-card-text>
            <div class="title" @click.stop>Word of the Day</div>
            <p class="display-1 text--primary"> be•nev•o•lent </p>
            <p>adjective</p>
            <div class="text--primary"> well meaning and kindly.<br> "a benevolent smile" </div>
        </v-card-text>
        <v-card-actions>
            <v-btn text color="deep-purple accent-4"> Learn More </v-btn>
        </v-card-actions>
    </v-card>
</v-app>

https://codeply.com/p/2ExpE6PF6F

如何避免@click 仅在一个 child 组件上

How to avoid @click on only one child component

javascript

stoppropagation

vue.js

vuetify.js