isolating child pointer events in CSS styling

Question

isolating child pointer events in CSS styling

I am looking for a way to prevent the click event on the checkbox from triggering the parent click event that opens a modal.

Check out this gif demonstrating the issue: https://gyazo.com/856a84242349609f4506095de33ee1df

Let me explain further what's happening here - the table rows can be clicked to open a modal with more information about the selected row. Additionally, there is a checkbox in each row that also has a click event, and I want to ensure that clicking the checkbox does not trigger the modal opening click event for the row.

css reactjs

Answer 1

Answer №1

Make sure to include e.stopPropagation() within the handleClick function for the checkbox. This action is essential to prevent the click event from the checkbox from 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>

Answer 2

Make sure to include e.stopPropagation() within the handleClick function for the checkbox. This action is essential to prevent the click event from the checkbox from 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>

isolating child pointer events in CSS styling

Answer №1

Similar questions

Discover the name of a color using its HEX code or RGB values

Elements with a lower z-index do not have text drawn over them

What is the best way to trigger a Redux Toolkit action within a React Router DOM action?

The `background-size` property in jQuery is not functioning as expected

Tips for wrapping text in an image overlay

The styles are not being successfully applied to the Material UI Menu component within a React application

Running Jest tests with a Node backend using express.js and frontend created with create-react-app is a seamless process that ensures your application

Exploring the composition of objects within a React-Redux application

The cube mesh is failing to render inside the designated div

Vertical alignment to the top is not possible for Inline-Block divs

The version of `create-react-app` you are currently using is 4.0.1, but the most recent release is 4.0.3

Getting the width of children components in Reactjs can be achieved by using the

When viewing my website on a larger screen, my list items are floating to the left. However, on an extra small screen, the list items are stacking on top of each other. Is there a way

Dynamic Cursor Modification Upon Hovering Over Child Component

Is it possible for me to position an element beside the element before it?

Can you help me adjust the height of my banner and center its content vertically?

The function persists in outputting a true result, despite the fact that it is expected to output

Positioning children within a div element

Bidirectional Data Binding Using Meteor and React

Changes made to the code on the GitHub repository are not automatically reflecting on the static website