0

Let's say, I have the following markup:

<RouterLink tag="div" to="/somepath">
    <p>Lorem ipsum dolor sit amet.</p>
    ...
    <button>A button</button>
</RouterLink>

I'm using tag="div", because nesting a <button> inside an a element is not valid HTML5.

With this markup, clicking anywhere inside the RouterLink, including a paragraph and a button, will cause navigation.

But my requirement is that clicking on the button does not cause navigation, but clicking on other elements does.

So, I use a div with @click handler that checks whether the clicked element is a button or its descendant and only navigates if not:

<div @click="navigateSomewhere">
    ...
</div>

export default {
  methods: {
    navigateSomewhere($event) {
      if(!$event.closest("button"))
        this.$router.push("/somePath")
    }
  }
}

But I'm wondering if there is a cleaner way of doing this.

I have also created an MCVE: https://codesandbox.io/s/vue-routerlink-button-3dlyx.

Max
  • 739
  • 2
  • 8
  • 23

2 Answers2

1
<button @click.prevent="">A button</button>
Michal Levý
  • 33,064
  • 4
  • 68
  • 86
0

It's becouse the button is under "the clicking area" that menas that is not targettable, try to set the position relative and the z-index: 99 to the button, and let me know

Lafa
  • 513
  • 2
  • 20