久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

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

瀏覽:154日期:2023-05-15 15:14:54

問(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上的其他事件處理,所以得用原生事件

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 宁阳县| 大洼县| 驻马店市| 洛宁县| 张家界市| 通海县| 中西区| 酉阳| 涡阳县| 田东县| 赫章县| 香格里拉县| 醴陵市| 疏附县| 青铜峡市| 高尔夫| 徐州市| 泗阳县| 读书| 莱州市| 镇平县| 垣曲县| 南木林县| 炎陵县| 连江县| 大庆市| 鄄城县| 南乐县| 太谷县| 开封县| 宁明县| 沧州市| 共和县| 麻阳| 湘乡市| 沧州市| 西安市| 五家渠市| 界首市| 安乡县| 凌海市|