直接上程式碼吧,我想了半天不知道哪裡出問題了。
state = { spread: false } componentDidMount() { console.log('document clicked') document.onclick = () => { if(this.state.spread) { this.setState({ spread: false }) } } } spreadHandler (e) { console.log('target clicked') // 这个事件绑定在一个 a 标签上 e.stopPropagation() this.setState({ spread: !this.state.spread }) }
這個功能就是一個類似淘寶頂部導航條的功能,只不過我這裡用的是點擊事件。現在我觸發spreadHandler的時候取消了冒泡,但是document的click事件還是會觸發。不知道是因為事件綁定在 a 標籤上,還是別的原因造成的,有人知道這是怎麼回事嗎?
react 的合成事件中的阻止冒泡, 是無法取消原生事件冒泡的.
原生事件中阻止冒泡行為, 反而可以阻止react 合成事件中的冒泡.
所以應該盡量避免混用, 非用不可的話, 可以在document 的事件處理程序中加一層判斷.
e.preventDeafult()
試試這個:
react的事件機制與原生js的事件機制是有所區別的。
react的合成事件都是透過綁定在document上click的事件代理實現的,所以無法透過阻止合成事件冒泡(已將冒到document上了)來阻止docuemnt上的其他事件處理,所以得用原生事件