单击父元素时防止子元素成为目标

Question

toggleMenu(element) {
    const el = element.target
    if(hasClass(el, this.activeClass)){
        el.classList.remove(this.activeClass)
    } else {
        el.classList.add(this.activeClass)
    }
}



 <div onClick={ this.toggleMenu.bind(this) } style={this.style} className ="vis-menu-toggle">
     <div className="box" style={styles.box}>
         <div className="top" style={styles.topLine}/>
         <div className="middle" style={styles.middleLine}/>
         <div className="top" style={styles.bottomLine}/>
      </div>
  </div>

我想在单击时向父 div 添加一个类，但如果单击内部 div，则目标元素不是父元素，并且子元素会收到该类。我该如何防止这种情况发生？

Answer 1

使用currentTarget而不是target. 它是事件当前被分派到的元素。

例子：

class Example extends React.Component {
  constructor(...args) {
    super(...args);
    this.activeClass = "active";
  }

  toggleMenu(element) {
      const el = element.currentTarget;
      el.classList.toggle(this.activeClass);
  }
  
  render() {
    return <div onClick={ this.toggleMenu.bind(this) } className="vis-menu-toggle">
       Topmost div
       <div className="box">
        Box
        <div className="top">top 1</div>
        <div className="middle">middle</div>
        <div className="top">top 2</div>
      </div>
    </div>
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);

.active {
  border: 1px solid black;
}

<div id="root"></div>
<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>

边注：

• classList有toggle，不需要if/else（并且你忘记了el.classList它前面的）