Home / Questions / 549660
Accepted
Agustin G.
Asked: 2022-08-03 05:48:50 +0800 CST 2022-08-03 05:48:50 +0800 CST

Mouse Enter event, also applies to children

  • 772

I have this code in react, and I hope that when I hover over a section, the function onMouseOverthat I pass by props to the component is executed. This function just prints a console.log of the e.target. The thing is that if I hover over the section, I correctly see <section id="amenities"... />, but if I hover over any inner element of this section, now the inner element is consoled. Is there a way to ALWAYS get as e.targetthe sectioninstead of its inner elements?

<section
  className="resort-amenities"
  id="amenities"
  onMouseEnter={onMouseOver}
 >
  <h2 className="title">Amenities</h2>
  <div className="amenities-wrapper">
    {renderAmenities}
  </div>
</section>
reactjs

1 Answers

  1. Best Answer

    ISSUE

    The problem is that you are using e.target:

    ...which identifies the element on which the event occurred.

    This way, hovering over any element within your <section>will delegate the event from the parent to the children.

    SOLUTION

    The solution is to use e.currentTargetthat:

    It always refers to the element to which the event handler was attached...

    That is, even if the event of hovering over your element <section>occurs on any child of it, currentTargetit will always be the parent, that is, your element <section>.

    I hope this helps you solve the problem.

    • 2