javascript - 如何作为 e.target 获取指定 onClick 的确切元素？

Question

我有一个 React 组件并给它 onClick 事件处理程序:

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

然后我像这样使用组件:

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

当我点击文本时，span 元素被记录为目标，当它在给定范围之外被点击时，li 元素被记录为目标。

问题是:
如果 li 元素中有很多子元素，并且必须获取 id 或 name，这将成为一个“hacky”任务...

问题是:
是否有可能进入处理程序函数，如 e.target 指定 onClick 的确切元素(不是子元素；在本例中为 li)？

附言。如果可能，不要使用 jQuery 作为解决方案。

Answer 1

event.target 将始终为您提供调度事件的元素。为了获取当前处理的监听器元素，您必须使用 event.currentTarget。

这应该有所帮助:https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets

这里有一个简单的例子来说明你的问题:

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>