Vue.js event target is null?

Question

I got a component with two styled buttons and one same event "mouseEnter".

<template>
  <div>
      <a 
          class="button red" 
          href="/about" 
          @mouseover="mouseEnter">  
          <svg viewBox="0 0 180 60">
              <path d="..."/>
          </svg>
          <span class="buttonSpan">About</span> 
      </a>
      <a 
          class="button green" 
          href="/contact" 
          @mouseover="mouseEnter">  
          <svg viewBox="0 0 180 60">
              <path d="..."/>
          </svg>
          <span class="buttonSpan">Contact</span>   
      </a>
  </div
</template>

When the event triggers I want to do something with the path and the span of the button that is hovered.

I'm trying to reference them with event.target but for the span I get null, and for the path everything is working good.

methods: {
  buttonEnter(event) {
    const buttonPath = event.target.querySelector('path')
    const buttonSpan = event.target.querySelector('span')
    
    ...
}

How should i reference the span ? Is there any other way I can do it ?

It probably did because he would not be able to call querySelector. Since that returns null it makes me think he is accidentally trying to select "span inside a span" which is not what he wants — ibrahim tanyalcin, Apr 26 '18 at 17:56
Btw you have `mouseEnter` (in view) vs `buttonEnter` (in methods object). Because of @ibowankenobi's point above, I'm guessing either one or the other is correct and it's a typo. — Quangdao Nguyen, Apr 26 '18 at 18:00
Hi guys, changing from event.target to event.currentTarget works perfect. Here you can see my code also https://codesandbox.io/s/1y4q4vzxv4. About the methods name it was a typo I was trying to make it simpler so I can ask the problem easier — Mart Cube, Apr 26 '18 at 18:13

score 1 · Accepted Answer · answered Apr 26 '18 at 17:54

1

the event target will bubble up starting from the children of the node that you attached your listener to. Use event.currentTarget

answered Apr 26 '18 at 17:54

ibrahim tanyalcin

5,643
3
16
22

Changing from event.target to event.currentTarget works perfect. Here you can see my code also https://codesandbox.io/s/1y4q4vzxv4. I was wondering if you can provide me with some documentation about difference when to use event.currentTarget or event.Target or something third @ibowankenobi – Mart Cube Apr 26 '18 at 18:09
1

@MartCube check [event target vs currentTarget](https://stackoverflow.com/questions/10086427/what-is-the-exact-difference-between-currenttarget-property-and-target-property) – Sphinx Apr 26 '18 at 18:20
sorry for the late reply, think of eventCurrent target as the element that you attached your event handler to. So event.currentTarget will never change. However if there is a child of the element, and you clicked the child, naturally the event will bubble twice, first event.target will be equal to the child, then it will be equal to the actual element that you attached the handler to. – ibrahim tanyalcin Apr 26 '18 at 20:18
im running into a similar issue with a click event however the `event.currentTarget` is always null. Essentially im trying to detect a click on an input but `event.target` is always body which doesnt help me at all – Jujubes Jan 24 '20 at 06:24
@Jujubes, the issue is framework handles the call of the function, for that reason some properties from the event object loose reference, gets no context etc. The solution could be to assign event.currentTarget to whatever you want it to be and use it later. This might help: https://forum.vuejs.org/t/currenttarget-return-null/16286 – ibrahim tanyalcin Jan 24 '20 at 08:46

Vue.js event target is null?

1 Answers1