在 VueJS 中获取事件侦听器元素而不是子元素

Question

I'm trying to get the element to which I have attached an event listener in the following code.

<div class="navigation-link" id="home" @click="click($event)">
  <button class="navigation-link-inner btn-large transparent z-depth-0">
    <i class="material-icons left">contact_mail</i>Home
  </button>
</div>
<div class="navigation-link" id="cms" @click="click($event)">
  <button class="navigation-link-inner btn-large transparent z-depth-0">
    <i class="material-icons left">contact_mail</i>CMS
  </button>
</div>
<div class="navigation-link" id="contact" @click="click($event)">
  <button class="navigation-link-inner btn-large transparent z-depth-0">
    <i class="material-icons left">contact_mail</i>Contact
  </button>
</div>

But when I click on the links, I am getting these elements depending on exact click location:

<i class="material-icons left">contact_mail</i>Home

<button class="navigation-link-inner btn-large transparent z-depth-0">
  <i class="material-icons left">contact_mail</i>Home
</button>

<div class="navigation-link" id="home">
  <button class="navigation-link-inner btn-large transparent z-depth-0">
    <i class="material-icons left">contact_mail</i>Home
  </button>
</div>

I only want to get this element

<div class="navigation-link" id="home">
  <button class="navigation-link-inner btn-large transparent z-depth-0">
    <i class="material-icons left">contact_mail</i>Home
  </button>
</div>

ie the parent element that to which I have attached event listener. How can I get this? Is there a short way to do this by attaching only one one event listener to parent and not on every link?

Answer 1

In order to reference the element that the listener is attached to, you should use evt.currentTarget instead of evt.target .