Charonyu's Profile

`event.stopPropagation()`

stopPropagation() 是一個用於阻止事件冒泡（bubbling）的 DOM 方法。事件冒泡是一種事件處理機制，當一個元素上的事件被觸發時，該事件不僅會在這個元素上觸發，還會向上冒泡到這個元素的所有父元素，直至根元素（通常是 document 物件或 window 物件）。

💡

子元素也會受影響，如果在父元素中使用了 e.stopPropagation()，那麼由於事件冒泡被阻止了，從子元素"冒泡上來"的事件就不會繼續向上傳播，直到達到 document 或 window,例如在子元素中使用useEffect document.addEventListener("click", handleClick); 因為不會繼續向上傳播至document,所以也無法有效使用。因此，如果你在 document 或 window 上也設置了事件監聽器，那麼它們將不會被觸發。

ex: 以下範例DropDownInput就無法用document.addEventListener('click', handleClick)監聽click


function Modal({ children }) {
  return (
    <div onClick={(e) => e.stopPropagation()}>
      <DropDownInput />    
		</div>
  );
}

function DropDownInput() {
  useEffect(() => {
    const handleClick = (e) => {
      console.log("DropDownInput clicked");
    };
    document.addEventListener('click', handleClick);

    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      DropDownInput
    </div>
  );
}

`event.preventDefault()`

第二個函式比較容易，他的作用是停止事件的默認動作，例如有時候我們會利用連結的<a>來當作按鈕，他本身DOM就擁有連結的功能，但是有時候我們會為他新增類似onclick的事件，而只要在該<a>觸發的事件中加入event.preventDefault()，就不會在執行他默認的動作，也就是不會再執行「連結到某個網址」這個動作

冒泡stopPropagation()與停止默認preventDefault()

event.stopPropagation()

event.preventDefault()

冒泡`stopPropagation()`與停止默認`preventDefault()`

`event.stopPropagation()`

`event.preventDefault()`