How to get as e.target the exact element at which onClick is specified?

Question

I have a React Component and give it onClick event handler:

function Item(props) {
  return <li onClick={props.onClick}>{props.children}</li>
}

Then I use the Component like this:

<Item onClick={ function(e) {console.log(e.target)} }>
  <span>This element is returned as e.target if clicked on it!</span>
</Item>

When I click on the text, the span element is logged as target and when it is clicked outside given span, li element is logged as target.

The problem is:
If there is a lot of child elements inside li element, and id or name are have to be gotten, it becomes a "hacky" task...

The question is:
Is it possible to get inside a handler function as e.target the exact element at which onClick is specified (not it's children; in this case li )?

PS. No jQuery for solution if possible.

Answer 1

event.target will always give you the element, which dispatched the event. In order to get the element who's listener is currently processed, you have to use event.currentTarget .

This should help: https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets

Here is a simple example to illustrated your issue:

 const Inner = () => <div className="inner">Inner</div> const Outer = () => { const clickHandler = e => { console.log('target:', e.target.getAttribute('class')); console.log('currentTarget:', e.currentTarget.getAttribute('class')); }; return (<div className="outer" onClick={clickHandler}><Inner /></div>); }; ReactDOM.render(<Outer/>, document.getElementById('app'));

 .outer { background: rosybrown; padding: 40px; } .inner { background: cornsilk; padding: 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>

Answer 2

Yes

 const { render } = ReactDOM; function Item(props) { return <li onClick={props.onClick} {props.children} </li> } render( <Item onClick = { function(e) { console.log(e.currentTarget) } }> <span> This element is returned as e.target if clicked on it! </span> </Item>, document.getElementById('root') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>