CODEWITHSUNDEEP
javascriptvue.js
Muhammad Waqar
Muhammad Waqar

Reputation: 138

Get Event Listener Element Instead Of Child In VueJS

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>

i.e 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?

Upvotes: 2

Views: 129

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28414

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

Upvotes: 2

Related Questions