• 技术文章 >web前端 >js教程

    react如何阻止冒泡失败

    coldplay.xixicoldplay.xixi2020-11-17 14:08:09原创60

    react阻止冒泡失败的方法:1、在没有涉及到原生事件注册只有react事件时,用【e.stopPropagation()】阻止冒泡;2、需要用到【e.nativeEvent.stopImmediatePropagation()】方法。

    react阻止冒泡失败的方法:

    1、在没有涉及到原生事件注册只有react事件时,用e.stopPropagation()阻止冒泡,代码如下:

    import React, { Component } from 'react';
    import './App.css';
    class App extends Component {
      handleClickTestBox = (e) => {
        console.warn('handleClickTestBox: ', e);
      }
      handleClickTestBox2 = (e) => {
        console.warn('handleClickTestBox2: ', e);
      }
      handleClickTestBox3 = (e) => {
        e.stopPropagation();
        console.warn('handleClickTestBox3: ', e);
      }
      render() {
        return (
          <div
            className="test-box"
            onClick={this.handleClickTestBox}
          >
            <div
              onClick={this.handleClickTestBox2}
            >
              <div
                onClick={this.handleClickTestBox3}
              >
              </div>
            </div>
          </div>
        );
      }
    }
    export default App;

    2、当用document.addEventListener注册了原生的事件后,用e.stopPropagation()是不能阻止与document之间的冒泡,这时候需要用到e.nativeEvent.stopImmediatePropagation()方法,代码如下:

    import React, { Component } from 'react';
    import './App.css';
    class App extends Component {
      componentDidMount() {
        document.addEventListener('click', this.handleDocumentClick, false);
      }
      handleDocumentClick = (e) => {
        console.log('handleDocumentClick: ', e);
      }
      handleClickTestBox = (e) => {
        console.warn('handleClickTestBox: ', e);
      }
      handleClickTestBox2 = (e) => {
        console.warn('handleClickTestBox2: ', e);
      }
      handleClickTestBox3 = (e) => {
        // 阻止合成事件的冒泡
        e.stopPropagation();
        // 阻止与原生事件的冒泡
        e.nativeEvent.stopImmediatePropagation();
        console.warn('handleClickTestBox3: ', e);
      }
      render() {
        return (
          <div
            className="test-box"
            onClick={this.handleClickTestBox}
          >
            <div
              onClick={this.handleClickTestBox2}
            >
              <div
                onClick={this.handleClickTestBox3}
              >
              </div>
            </div>
          </div>
        );
      }
    }
    export default App;

    3、阻止合成事件与非合成事件(除了document)之间的冒泡,以上两种方式都不适用,需要用到e.target判断, 代码如下:

    import React, { Component } from 'react';
    import './App.css';
    class App extends Component {
      componentDidMount() {
        document.addEventListener('click', this.handleDocumentClick, false);
        document.body.addEventListener('click', this.handleBodyClick, false);
      }
      handleDocumentClick = (e) => {
        console.log('handleDocumentClick: ', e);
      }
      handleBodyClick = (e) => {
        if (e.target && e.target === document.querySelector('#inner')) {
          return;
        }
        console.log('handleBodyClick: ', e);
      }
      handleClickTestBox = (e) => {
        console.warn('handleClickTestBox: ', e);
      }
      handleClickTestBox2 = (e) => {
        console.warn('handleClickTestBox2: ', e);
      }
      handleClickTestBox3 = (e) => {
        // 阻止合成事件的冒泡
        e.stopPropagation();
        // 阻止与原生事件的冒泡
        e.nativeEvent.stopImmediatePropagation();
        console.warn('handleClickTestBox3: ', e);
      }
      render() {
        return (
          <div
            className="test-box"
            onClick={this.handleClickTestBox}
          >
            <div
              onClick={this.handleClickTestBox2}
            >
              <div
                id="inner"
                onClick={this.handleClickTestBox3}
              >
              </div>
            </div>
          </div>
        );
      }
    }
    export default App;

    相关免费学习推荐:JavaScript(视频)

    以上就是react如何阻止冒泡失败的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:react 阻止冒泡
    上一篇:react中portal是什么意思 下一篇:react中元素和组件的区别是什么
    第14期线上培训班

    相关文章推荐

    • jQuery阻止冒泡和HTML默认操作_jquery• 如何解决VUE框架中导致绑定事件的阻止冒泡失效问题• js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件• vue中的事件阻止冒泡的用法详解

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网