問(wèn)題描述

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

state = {spread: false } componentDidMount() {console.log(’document clicked’)document.onclick = () => { if(this.state.spread) {this.setState({ spread: false}) }} } spreadHandler (e) {console.log(’target clicked’)// 這個(gè)事件綁定在一個(gè) a 標(biāo)簽上e.stopPropagation()this.setState({ spread: !this.state.spread}) }

這個(gè)功能就是一個(gè)類(lèi)似淘寶頂部導(dǎo)航條的功能，只不過(guò)我這里用的是點(diǎn)擊事件。現(xiàn)在我觸發(fā)spreadHandler的時(shí)候取消了冒泡，但是document的click事件還是會(huì)觸發(fā)。不知道是因?yàn)槭录壎ㄔ?a 標(biāo)簽上，還是別的什么原因造成的，有人知道這是怎么回事嗎？

問(wèn)題解答

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

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

e.preventDeafult()

試試這個(gè)：

e.nativeEvent.stopImmediatePropagation();

react的事件機(jī)制與原生js的事件機(jī)制是有所區(qū)別的。

react的合成事件都是通過(guò)綁定在document上click的事件代理實(shí)現(xiàn)的，所以無(wú)法通過(guò)阻止合成事件冒泡(已將冒到document上了）來(lái)阻止docuemnt上的其他事件處理，所以得用原生事件