August Haug Hem August Haug Hem - 26 days ago 9
CSS Question

css isolate child pointer event

I want to be able to separate the pointer event on the checkbox, making it not trigger the parent pointer event which opens a modal.

Here is a gif showing my issue: https://gyazo.com/856a84242349609f4506095de33ee1df

To elaborate on what is going on here, the table rows are clickable and will open up a modal that will show extended information regarding the the clicked row.
In addition to this I have a checkbox on this row which has a click event itself and I want to isolate this checkbox from triggering the "row" click event.

Answer

You need to use e.stopPropagation() in the handleClick function for the checkbox. This will prevent the click event from checkbox bubbling up to the parent row element.

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>