冒泡&捕获

html

<div id="red">
    <div id="pink">
        <div id="orange"></div>
    </div>
</div>

冒泡阶段触发

点击 : orange===> orange -> pink -> red

let red = document.getElementById('red')
let pink = document.getElementById('pink')
let orange = document.getElementById('orange')
red.addEventListener('click', e => alert('red'))
pink.addEventListener('click', e => alert('pink'))
orange.addEventListener('click', e => alert('orange'))

捕获阶段触发

点击 : orang===> red -> pink -> orange

第三个参数为true时, 表示捕获阶段触发

let red = document.getElementById('red')
let pink = document.getElementById('pink')
let orange = document.getElementById('orange')
red.addEventListener('click', e => alert('red'), true)
pink.addEventListener('click', e => alert('pink'), true)
orange.addEventListener('click', e => alert('orange'), true)

阻止冒泡 e.stopPropagation()

e.stopPropagation()不仅可以阻止冒泡,还可以阻止捕获

function App() {
  const [count, setCount] = useState(0);
  const click = (e: Event) => {
    e.stopPropagation()
    alert(2)
  }

  return (
    <div className="App" onClick={()=>alert(1)} >
      <h2 onClick={click} >{count}</h2>
    </div>
  );
}