我有一個帶有 onClick 處理程序的 div 以及帶有 onClick 事件的按鈕。 如何防止按鈕觸發 div onclick？

Question

基本上我有一份你團隊成員的名單。 每個成員都有一個單獨的 div，要選擇一個成員，請單擊 div。 我在 div 上添加了一個點擊事件處理程序，以便點擊它選擇該特定成員並突出顯示它。 我在每個成員的 div 內還有一個編輯按鈕和一個刪除按鈕。 然而，現在發生的事情是，當您想要編輯或刪除團隊成員時，它也會觸發 div onClick。 我知道這是預期的行為，但是我不確定如何在單擊按鈕時防止 div onClick 觸發，或者如何在不將按鈕放入 div 的情況下實現相同的“外觀和感覺”。

我想保持相同的外觀（每個團隊成員的一個部分，可以單擊以選擇團隊成員）但我不介意更改 div 的結構。 如果這很重要，我正在 React 工作。

Answer 1

這是一個簡單的示例，說明如何阻止點擊冒泡到父級：

const Button = () => (
  <div
    onClick={() => {
      console.log("I won't trigger if you click the inside div");
    }}
  >
    <div
      onClick={event => {
        event.stopPropagation(); // <-- this stops the click going through to the parent div
        console.log('Thank you for clicking the inside div');
      }}
    >
      I'm Inside
    </div>
  </div>
);

Answer 2

將 onClick 更改為：

    onClick = (event) => {
        //event.target includes the specific element which was clicked.
        if(event.target.id == '<YOUR-DIV-ID>'){
        //handler
        }
    }