javascript - react 中綁定事件和阻止事件冒泡
学习ing
学习ing 2017-06-26 10:57:42
0
4
781

直接上程式碼吧,我想了半天不知道哪裡出問題了。

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

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

学习ing
学习ing

全部回覆 (4)
滿天的星座

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

document.addEventListener('click', function(e){ // 类似事件委托, 判断一下发生事件的元素. if( e.target.nodeName.toLowerCase() === 'a' ) { return; } }, false);
    学习ing

    e.preventDeafult()

      代言

      試試這個:

      e.nativeEvent.stopImmediatePropagation();

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

        扔个三星炸死你

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

          最新下載
          更多>
          網站特效
          網站源碼
          網站素材
          前端模板
          關於我們 免責聲明 Sitemap
          PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!