javascript-如何使用父元素阻止子元素上的click事件

<div id="parent">
      <div>
         <button onClick={() => console.log("a")}>a</button>
      </div>
      <button onClick={() => console.log("b")}>b</button>
      <button onClick={() => console.log("c")}>c</button>
    </div>

如上，它有一个父元素和一个子元素。这种情况下，是不是可以通过父元素阻止子元素被点击，或者阻止子元素的onclick事件被触发呢？

在上述情况下，无论点击哪个按钮，都不应该生成console.log。

有一种方法可以通过添加另一个元素来覆盖父元素，但我很好奇如何仅通过父元素来防止它。