Question

我希望能够将复选框上的指针事件分开，使其不会触发打开模态的父指针事件。

以下是显示我的问题的GIF：https://gyazo.com/856a84242349609f4506095de33ee1df

为了详细说明这里发生了什么，表格行是可点击的，并将打开一个模态，显示有关所点击行的扩展信息。除此之外，我在这一行上有一个复选框，它本身有一个点击事件，我希望将此复选框与触发“行”点击事件隔离开来。

Answer 1

您需要在e.stopPropagation()函数中使用handleClick作为复选框。这将阻止click事件冒泡到父行元素。

class App extends React.Component {
  handleCheckClick = (e) => {
     console.log('checkbox clicked');
     e.stopPropagation();
  }
   handleRowClick = (e) => {
     console.log('row clicked');
    
  }
  render() {
   return ( <table>
      <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
      </tr>
      </thead>
      <tbody>
        <tr onClick={this.handleRowClick}>
          <td>
            <input type="checkbox" onClick={this.handleCheckClick}/>
          </td>
          <td>Abc</td><td>XYZ</td>
           
        </tr>
      </tbody>
    </table>)
  }

}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

css隔离儿童指针事件

1 个答案: