The click is apply on and in tr there is also button, how do I prevent tr onlick event on a btn inside that tr and the btn have onclick event too!

<tr key={index} onClick={() => this.getDetailPage(jobsData)}>
  <td>{serial_num}</td>
  <td>{jobsData.status}</td>
  <td>
    <button onClick={() => this.editjob(jobsData)}>Edit</button>
  </td>
</tr>;

CodePudding user response：

You can stopPropagation to stop capturing and bubbling phases:

        <tr
          key={index}
          onClick={(e) => {
            e.stopPropagation();
            this.getDetailPage(e, jobsData);
          }}
        >
          <td>{serial_num}</td>
          <td>{jobsData.status}</td>
          <td>
            <button onClick={() => this.editjob(jobsData)}>Edit</button>
          </td>
        </tr>

CodePudding user response：

Pass the event attribute through the callback and then add:

event.stopPropagation();

This should looks like:

<tr key={index} onClick={(event) => event.stopPropagation();this.getDetailPage(jobsData)}>
                <td>{serial_num}</td>
                <td>{jobsData.status}</td>
                <td><button onClick={(event) => event.stopPropagation();this.editjob(jobsData)}>Edit</button></td>
              </tr>

This example is an answer to your code. If you add a method you can do this in the method.

function methodName(event) {
    event.stopPropagation();
    this.getDetailPage(jobsData)
}

<tr key={index} onClick={this.methodName}>
                <td>{serial_num}</td>
                <td>{jobsData.status}</td>
                <td><button onClick={this.methodName}>Edit</button></td>
              </tr>

CodePudding user response：

If i got it, you want to prevent inside button to propagate event to the outside tr. Then you can do something like this:

<button onClick={(e) => {
    e.preventDefault();
    e.stopPropagation();
    this.editjob(jobsData);
    }
}>