防止单击表格行时触发行内按钮的事件

Question

我有一个带有ONCLICK事件的表格行（切换下方的额外数据）。在一行单元格内，我有一个按钮（点击时执行AJAX操作）。 当我点击按钮时，行的onclick事件也会触发，导致在AJAX调用完成之前附加的数据出现（这对我来说是不良行为）。 有什么好的解决办法吗？（不需要识别并将其编码到行的onclick代码中） 谢谢

- Guy

Answer 1

在你的按钮的 click 事件处理函数中添加 event.stopPropagation();。欲了解更多信息，请查看此处。

- Niklas

---

指引我找到了确切的解决方案。谢谢！ - Guy

直接链接对于懒人来说非常好用！它可以完美地禁用表格行事件处理程序的触发，但仍然允许单击表格数据中的链接！！- https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation - jordan

太棒了，谢谢！这也适用于 TypeScript：event.stopPropagation(); - Mohammad Zaid Pathan

有没有更好的方法来做这件事呢？我不想一个个找到所有的按钮并添加 stopPropagation。 - dwjohnston

Answer 2

如果您不喜欢JavaScript解决方案，在许多情况下，CSS解决方案也是可行的：

style="pointer-events: none;"

这将取消 <tr> 的 onclick 事件。

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

- John

---

这正是我所需要的答案，因为我调用的onclick方法还调用了其他方法，而event.stopPropagation();阻止了它们被调用！ - Charlotte

Answer 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
});

- Displee

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

- Balwinder Singh Sohi