javascript - react 中綁定事件和阻止事件冒泡
問(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è)類似淘寶頂部導(dǎo)航條的功能,只不過(guò)我這里用的是點(diǎn)擊事件。現(xiàn)在我觸發(fā)spreadHandler的時(shí)候取消了冒泡,但是document的click事件還是會(huì)觸發(fā)。不知道是因?yàn)槭录壎ㄔ?a 標(biāo)簽上,還是別的什么原因造成的,有人知道這是怎么回事嗎?
問(wèn)題解答
回答1:react 的合成事件中的阻止冒泡, 是無(wú)法取消原生事件冒泡的.原生事件中阻止冒泡行為, 反而可以阻止 react 合成事件中的冒泡.所以應(yīng)該盡量避免混用, 非用不可的話, 可以在 document 的事件處理程序中加一層判斷.
document.addEventListener(’click’, function(e){ // 類似事件委托, 判斷一下發(fā)生事件的元素. if( e.target.nodeName.toLowerCase() === ’a’ ) {return; }}, false);回答2:
e.preventDeafult()
回答3:試試這個(gè):
e.nativeEvent.stopImmediatePropagation();
react的事件機(jī)制與原生js的事件機(jī)制是有所區(qū)別的。
回答4:react的合成事件都是通過(guò)綁定在document上click的事件代理實(shí)現(xiàn)的,所以無(wú)法通過(guò)阻止合成事件冒泡(已將冒到document上了)來(lái)阻止docuemnt上的其他事件處理,所以得用原生事件
相關(guān)文章:
1. docker images顯示的鏡像過(guò)多,狗眼被亮瞎了,怎么辦?2. Java:密碼包(加密和解密)。無(wú)效的密鑰錯(cuò)誤3. css - 微信小程序點(diǎn)擊展開(kāi),再次點(diǎn)擊收回4. 點(diǎn)擊頁(yè)面就自動(dòng)輸入到mysql.求解5. macos - mac下docker如何設(shè)置代理6. css - vue.js的vue單文件組件style中的scoped屬性無(wú)效7. angular.js - 在ng-option 里使用過(guò)濾器無(wú)效8. node.js - 求問(wèn)nw.js開(kāi)發(fā)桌面版,其js計(jì)算性能如何?9. 我在centos容器里安裝docker,也就是在容器里安裝容器,報(bào)錯(cuò)了?10. thinkphp5.1學(xué)習(xí)時(shí)遇到session問(wèn)題
