子 div 上的 OnClick 不应该为特定子触发父 div 的 onClick 方法

Question

考虑以下 React 组件

export default function App() {

  return (

    <div className="App" onClick={() => console.log("on app div")}>

      <div className="first" onClick={() => console.log("first div")}>

        first

      </div>

      <div className="second" onClick={() => console.log("second div")}>

        second

      </div>

      <div className="third">third</div>

    </div>

  );

}

因此，单击子 div 当前将触发父 div 和子 div 的 onClick 方法。但是对于第一个孩子，我只想触发子 onClick 方法。有没有办法做到这一点？

我试过给子 div 一个更高的 z-index 值，但它仍然触发两个 onClicks，这是我试过的 css

.App {

  font-family: sans-serif;

  text-align: center;

  position: relative;

}

.first,.second,.third {

  position: absolute;

  width: 100px;

  line-height: 100px;

  text-align: center;

}

.first {

  background: lightblue;

  position: absolute;

  z-index: 10;

}

.second {

  background: lightcoral;

  position: absolute;

  left: 200px;

}

.third {

  background: lawngreen;

  position: absolute;

  left: 100px;

}

谁能告诉我我尝试过的 css 或任何其他方法是否有问题以实现此目的。

Answer 1

你应该使用 event.stopPropagation()<div className="second" onClick={(event) =>&nbsp; &nbsp; event.stopPropagation()&nbsp; &nbsp; console.log("second div")&nbsp;}>&nbsp; &nbsp; second</div>