单击行内的按钮时防止触发表行 onclick 事件答案

【问题标题】：Prevent table row onclick event to fire when clicking button inside the row单击行内的按钮时防止触发表行 onclick 事件
【发布时间】：2011-09-23 09:55:06
【问题描述】：

我有一个带有 ONCLICK 事件的表行（用于切换下面的其他数据）。在其中一个行单元格内，我有一个按钮（单击时正在执行 AJAX 操作）。当我单击按钮时 - Row 的 onclick 事件也会触发，发生的情况是在 AJAX 调用完成之前出现了附加数据（这对我来说是一个不好的行为）。有什么想法可以优雅地解决这个问题吗？（无需识别并将其编码到该行的 onclick 代码中）谢谢

【问题讨论】：

标签： javascript html dom

【解决方案1】：

将event.stopPropagation(); 添加到您的按钮click 处理程序。欲了解更多信息，请查看here。

【讨论】：

指导我找到确切的解决方案。谢谢！！
懒人的直接链接！ - 就像一个魅力来禁用表格行事件处理程序触发，但仍然允许点击表格数据中的链接！ - developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/…
太棒了-谢谢，也为TypeScript工作过：event.stopPropagation();

【解决方案2】：

如果您不喜欢 javascript 解决方案，在许多情况下也可以使用 CSS 解决方案：

style="pointer-events: none;"

这将抑制<tr> onclick 事件。

但是，在某些情况下，我仍然遇到了似乎无法正常工作的问题。在大多数情况下，我只使用上面的样式。

【讨论】：

这是我需要的答案，因为我调用的 onclick 方法称为其他方法和 event.stopPropagation();也阻止了他们被召唤！

【解决方案3】：

如果你使用 jQuery，你可以这样做：

tbody.on('click', 'tr', function (e) {
    let target = $(e.target);
    if (target.is('i') || target.is('button') || target.is('a') || target.hasClass('select-checkbox')) {
        return;
    }
    //your stuff here
});

【讨论】：

【解决方案4】：

 <table>
    <thead>
          <tr>
              <th>Card_ID</th>
                <th>Card_Number</th>
                 <th>Status</th>
                  <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="pointer-events: none;">
                        <td>3</td>
                        <td>12345</td>
                        <td>Active</td>
                        <td><button style="pointer-events: auto;" type="button" id="Inactive" class="btn btn-sm"></button></td>
                    </tr>
                </tbody>
            </table>

【讨论】：