从按钮单击计算弹出位置，而不是按钮内的 SVG答案

【问题标题】：Calculating a popover position from a button click, instead of an SVG inside the button从按钮单击计算弹出位置，而不是按钮内的 SVG
【发布时间】：2018-09-17 14:03:10
【问题描述】：

在过去的几个小时里，我一直在努力让按钮点击工作。该按钮包含文本和 SVG，单击它会打开一个弹出组件。

弹出框计算它在被点击元素上的位置。这在单击按钮本身时有效，但是当单击按钮内部的 SVG 时，SVG 的尺寸/偏移量用于计算弹出位置。

我在寻找什么：一种将 SVG 上的点击冒泡到按钮的方法，然后使用按钮点击中的事件对象来计算弹出位置。

我的事件按钮现在的样子：

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

我尝试在按钮和 SVG 上使用 @click.modifiers，但无济于事。希望有人能回答我！ :)

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

您可以通过将 $event 作为参数传递给您的函数来获取按钮的引用，然后访问该引用的 .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

【讨论】：

我刚刚添加了一个有效的 Codepen 链接。你能给出一个更大的代码示例吗？也许还有其他原因导致了这个问题。
没错，直接访问e.currentTarget就可以了：codepen.io/anon/pen/rZqQNL?editors=1010
谢谢-我现在就开始尝试这个，有点被拖走了..：P