Question

我有一个<li onClick={x}>，里面有两个<span>，当我单击并尝试获取事件目标时，我会根据点击的位置得到li或span元素，不管我在哪里点击，都只想获取li元素

<li value={1} onClick={this.handleClick}>
  <span> Ones </span>
  <span> Adds 1 point per One </span>
</li>

handleClick(e) {
    console.log(e.target)
}

期望：li元素

结果：li或span取决于我单击的位置

Answer 1

如果您想获取事件所属的目标，请使用import pandas as pd raw_baseball_url = "https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/baseball.csv" df = pd.read_csv(raw_baseball_url)

e.currentTarget instead

class Demo extends React.Component {
  handleClick = e => {
      console.log(e.currentTarget)
  }

  render() {
    return(
      <li value={1} onClick={this.handleClick}>
        <span> Ones </span>
        <span> Adds 1 point per One </span>
      </li>
    )
  }
}

ReactDOM.render(
  <Demo />,
  document.body
);

Answer 2

解决此问题的另一种方法是使用CSS。

由于您不希望<li>标记的子代响应单击事件，因此可以添加样式以防止子代对事件做出响应，如下所示：

li > * {
  pointer-events: none;
}

这将有效地阻止<li>元素的任何子元素响应点击事件。

Here's a beautiful article by CSS Tricks解释了pointer-events属性。

如何获得具有两个span子元素的li元素的onClick元素？

2 个答案: