javascript - 防止点击父元素时子元素成为目标

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。它是事件当前被分派(dispatch)到的元素。

例子:

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在它前面)