单击适用于 tr 中还有按钮 onclick 事件

Question

单击适用于并且在 tr 中还有按钮，我如何防止 tr onlick 事件发生在该 tr 内的 btn 上，并且 btn 也有 onclick 事件！

<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>

Answer 1

您可以 stopPropagation 停止捕获和冒泡阶段：

        <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>

Answer 2

如果我明白了，您想防止内部button将事件传播到外部tr 。 然后你可以做这样的事情：

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

Answer 3

通过回调传递事件属性，然后添加：

event.stopPropagation();

这应该看起来像：

<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>

此示例是您的代码的答案。 如果添加方法，则可以在方法中执行此操作。

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>