javascript - react 中綁定事件和阻止事件冒泡

問題描述

直接上代碼吧，我是想了半天不知道哪里出問題了。

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}) }

這個功能就是一個類似淘寶頂部導航條的功能，只不過我這里用的是點擊事件?，F在我觸發spreadHandler的時候取消了冒泡，但是document的click事件還是會觸發。不知道是因為事件綁定在 a 標簽上，還是別的什么原因造成的，有人知道這是怎么回事嗎？

問題解答

react 的合成事件中的阻止冒泡, 是無法取消原生事件冒泡的.原生事件中阻止冒泡行為, 反而可以阻止 react 合成事件中的冒泡.所以應該盡量避免混用, 非用不可的話, 可以在 document 的事件處理程序中加一層判斷.

document.addEventListener(’click’, function(e){ // 類似事件委托, 判斷一下發生事件的元素. if( e.target.nodeName.toLowerCase() === ’a’ ) {return; }}, false);回答2：

e.preventDeafult()

試試這個：

e.nativeEvent.stopImmediatePropagation();

react的事件機制與原生js的事件機制是有所區別的。

react的合成事件都是通過綁定在document上click的事件代理實現的，所以無法通過阻止合成事件冒泡(已將冒到document上了）來阻止docuemnt上的其他事件處理，所以得用原生事件