問題描述

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

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

問題解答

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

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

e.preventDeafult()

試試這個(gè)：

e.nativeEvent.stopImmediatePropagation();

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

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