Вычисление позиции поповера по нажатию кнопки вместо SVG внутри кнопки

Question

Последние несколько часов я изо всех сил пытался заставить работать кнопку.Кнопка содержит текст и SVG, при нажатии на нее открывается всплывающий компонент.

Поповер рассчитывает свою позицию на элементе, по которому был выполнен щелчок.Это работает при нажатии на саму кнопку, но при нажатии на SVG внутри кнопки, размеры / смещения из SVG используются вместо того, чтобы вычислять позицию поповера.

Что я ищу: способ навести щелчок на SVG на кнопку, а затем использовать объект события из нажатия кнопки, чтобы вычислить позицию поповера.

Как моя кнопка ссобытия выглядят как сейчас:

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

Я пытался поиграть с @ click.modifiers как на кнопке, так и в SVG, но безрезультатно. Надеюсь, у меня есть ответ для меня!:)

Answer 1

Вы можете получить ссылку на кнопку, передав событие $ в качестве параметра своей функции, а затем получив доступ к .currentTarget этой ссылки:

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

А потом в твоей функции:

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

Рабочий код: https://codepen.io/anon/pen/gdBBdz