事件處理函式中， e.stopPropagation()能放在 onChangeColor()後邊執行嗎？

龙陌發表於2024-05-05
事件函式

在JavaScript事件處理中，e.stopPropagation() 的作用是阻止事件向上冒泡到父元素，也就是說，它防止當前元素的事件繼續傳播到DOM樹上的其他事件監聽器。因此，它的位置對於事件流的行為至關重要。

將 e.stopPropagation() 放在 onChangeColor() 後面執行，在大多數情況下不會改變 onChangeColor 函式內部操作的效果，因為stopPropagation隻影響事件傳播，並不影響當前事件處理函式內後續程式碼的執行。
但是，這樣的寫法可能會導致邏輯上的混亂，因為通常我們期望先處理事件傳播行為，再執行具體的業務邏輯。

更標準的做法是先呼叫 e.stopPropagation()，然後再呼叫業務邏輯相關的函式，這樣程式碼的意圖更加清晰。
下面是調整後的程式碼示例：

export default function ColorSwitch({ onChangeColor }) {
  const handleClick = (e) => {
    e.stopPropagation(); // 先阻止事件冒泡
    onChangeColor();
  };

  return (
    <button onClick={handleClick}>
      改變顏色
    </button>
  );
}

總之，雖然技術上可以將 e.stopPropagation() 放在 onChangeColor() 之後，但從程式碼可讀性和維護性角度考慮，建議先執行 e.stopPropagation()。

相關文章