Get Event Listener Element Instead Of Child In 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>

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?

I want the parent div, i.e .navigation-link div, no matter I click on icon, button or itself — Muhammad Waqar
– Muhammad Waqar, Commented Apr 6, 2020 at 15:05

Majed Badawi · Accepted Answer · 2020-04-06 15:09:33Z

2

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

answered Apr 6, 2020 at 15:09

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Waqar Over a year ago

Thanks bro, it worked. Is there a better way to do this? Like if I have many links, then I have to attach listener on every link, can I put them in some external parent <div> and then attach the listener on that div to capture all clicks on these links?

Majed Badawi Over a year ago

Can you explain your main purpose/usage in a scenario? Like why do you want to make one listener for several links when you are interested in detecting the click of each seperately?

Collectives™ on Stack Overflow

Get Event Listener Element Instead Of Child In VueJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related