CODEWITHSUNDEEP
vue.js
Edin Osmic
Edin Osmic

Reputation: 446

Prevent onclick event for parent when link inside is clicked in Vue

I have a box as a parent element, and some elements inside parent. I want to be able to select this parent when clicked anywhere inside except that link. Link is working in my example, but the problem is that parent still gets selected...

<div class="parent" @click="select">
  <div class="text">
  </div>
  <div class="additional">
    <a :href="google.com" class="link" target="_blank">Go to...</a>
  </div>
</div>

v-on:click.stop, this solution was suggested for similar questions, but this is probably for elements like divs, paragraphs, etc...

Upvotes: 1

Views: 2675

Answers (1)

Ben
Ben

Reputation: 2235

Have a look at Event Modifiers in the Vue.js docs here, v-on:click.stop will stop that click from propagating or "bubbling" up to the parent element.

This should work:

<a @click.stop :href="google.com" class="link" target="_blank">Go to...</a>

If it doesn't work, then you can try something like this:

<div class="parent" @click="select">
   <div class="text"></div>
   <div class="additional">
      <a @click.stop="goToUrl" class="link">Go to...</a>
   </div>
</div>

methods: {
    goToUrl() {
        window.location.href = "https://www.google.com/";
    }
}

Upvotes: 2

Related Questions