vue.js - 通过单击按钮而不是按钮内的 SVG 计算弹出窗口位置

Question

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

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

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

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

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

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

Answer 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