Vue.js中event.target为null？绑定共享mouseEnter事件的组件问题

Hey there, let's break down why your mouseover event is returning a null target and walk through fixes to get it working right!

Common Causes & Solutions #

1. You're not explicitly passing the event object #

In Vue, if you don't pass $event to your event handler, the function might not receive the proper event object (leading to null or undefined in edge cases).

Fix:
Update your template to pass the event explicitly:

<a class="button red" href="/about" @mouseover="mouseEnter($event)">
<!-- Repeat for the green button -->

Then make sure your handler accepts the event parameter:

methods: {
  mouseEnter(event) {
    // Now you can safely access event properties
    console.log('Event target:', event.target);
  }
}

2. Using event.target instead of event.currentTarget #

When you hover over child elements (like the <svg> or <span> inside your <a> tag), event.target will point to that child. If that child gets unmounted or modified right after the event triggers, event.target could become null.

event.currentTarget always refers to the element the event was bound to (your <a> button), which is far more reliable for your use case.

Fix:
Switch to currentTarget in your handler:

mouseEnter(event) {
  const buttonElement = event.currentTarget;
  console.log('Button element:', buttonElement);
  // Access child elements if needed
  const buttonText = buttonElement.querySelector('.buttonSpan').textContent;
}

3. Event triggers component re-rendering that destroys the target #

If your mouseEnter method modifies reactive data that causes the component to re-render, the original button element might get unmounted before you can access event.target.

Fix:
Save a reference to the element before modifying any reactive data:

mouseEnter(event) {
  // Save the element reference first
  const targetElement = event.currentTarget;
  
  // Now perform data updates that trigger re-rendering
  this.isButtonHovered = true;
  
  // Use the saved reference instead of event properties
  console.log('Hovered button:', targetElement);
}

4. Browser event timing issues (rare) #

Occasionally, browser event processing can lead to event.target being null if the element is removed synchronously during event handling. If you need to perform DOM operations after the event completes, wrap them in $nextTick:

mouseEnter(event) {
  const targetElement = event.currentTarget;
  this.$nextTick(() => {
    // DOM is stable here, perform your operations
    targetElement.classList.add('hover-highlight');
  });
}

Modified Component Example #

Here's how your component might look with these fixes applied:

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

<script>
export default {
  data() {
    return {
      isButtonHovered: false
    };
  },
  methods: {
    mouseEnter(event) {
      const button = event.currentTarget;
      console.log('Hovered button:', button.textContent.trim());
      
      // Update reactive data after saving the element reference
      this.isButtonHovered = true;
      
      // Optional: Adjust button styles safely
      this.$nextTick(() => {
        button.style.transform = 'scale(1.05)';
      });
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者Mart Cube