javascript - 仅当事件位于具有特定类的 dom 元素之外时才触发事件

Question

我有一个监听点击的事件监听器。如果这些点击位于给定 dom 元素之外，则会调用某个函数(在本例中为 handleClick)。

现在，仅当事件目标不是具有 this.setWrapper 引用的事件目标时，才会调用函数 handleClick。

我想知道如果我也碰巧点击了 .boxTwo，如何防止调用 handleClick。

注意，我不想通过向 .boxTwo 的 div 添加引用来实现此目的，而是通过查询 DOM 来识别具有类名 ' 的 div 内部发生的任何点击框二'。谢谢!

class App extends React.Component {
  constructor() {
    super();
    this.state = {onClick: false};
    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClick);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClick);
  }

  setWrapperRef(node) {
    this.wrapperRef = node;
  }

  handleClick(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      this.setState({onClick: !this.state.onClick});
    }
  }

  render() {
    return (
      <section>
        <div className="boxOne" ref={this.setWrapperRef} />
        <div className="boxTwo" />
        <div>{this.state.onClick ? "On" : "Off"}</div>
      </section>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

.boxOne {
  height: 100px;
  width: 100px;
  background: pink;
}

.boxTwo {
  margin: 30px;
  height: 50px;
  width: 70px;
  border: solid black 2px;
  background: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="app"></div>

Answer 1

• 您只需检查 event.target.className 是否不等于 boxTwo，如下面的代码片段。
• 如果目标具有 boxOne 类，您可以使用相同的“技术”来阻止调用您的函数。
• 如果您想在根本没有 className 的所有情况下触发，您可以在条件语句中使用:!event.target.className

额外一点，为了可读性，我会这样做

handleClick(event) {

    // The ones that don't trigger
    const disabledTriggers = ['boxOne', 'boxTwo'];

    // Ok if no class contained in our event classList are disabled
    const ok = !disabledTriggers.some(c => event.target.classList && event.target.classList.contains(c))
    if(ok) {
      this.setState({onClick: !this.state.onClick});
    }
  }

这是您的代码片段，其中包含解决方案和最少的修改。

class App extends React.Component {
  constructor() {
    super();
    this.state = {onClick: false};
    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClick);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClick);
  }

  setWrapperRef(node) {
    this.wrapperRef = node;
  }

  handleClick(event) {
    
    if (event.target.className !== 'boxTwo' && this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      this.setState({onClick: !this.state.onClick});
    }
  }

  render() {
    return (
      <section>
        <div className="boxOne" ref={this.setWrapperRef} />
        <div className="boxTwo" />
        <div>{this.state.onClick ? "On" : "Off"}</div>
      </section>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

.boxOne {
  height: 100px;
  width: 100px;
  background: pink;
}

.boxTwo {
  margin: 30px;
  height: 50px;
  width: 70px;
  border: solid black 2px;
  background: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="app"></div>