Calculating a popover position from a button click, instead of an SVG inside the button

user_1235234 0
Viewed 110

I have been struggling for the past few hours to get a button click to work. The button contains text and an SVG, when clicking on it it opens a popover component.

The popover calculates its position on the element that was clicked upon. This works when clicking on the button itself, but when clicking on the SVG inside of the button, the dimensions/offsets from the SVG are used to calculate popover position instead.

What am I looking for: a way to bubble the click on the SVG to the button, then using the event object from the button click to calculate the popover position.

How my button with events looks like right now:

<button type="button"
        @click="popButtonClicked">
  Go do magical stuff
  <svg path="" />
</button>

I have tried playing with @click.modifiers on both the button and SVG, but to no avail.. Hope someone has the answer for me! :)

vuejs2 vue.js
1 Answers

You can get the button's reference by passing the $event as a parameter to your function, and then accessing the .currentTarget of that reference:

  <button type="button"
          @click="popButtonClicked($event)">
    Go do magical stuff
    <svg path="" />
  </button>

And then in your function:

popButtonClicked (event) {
      console.log(event.currentTarget)
}

Working codepen: https://codepen.io/anon/pen/gdBBdz

user_67886660
Related