Question

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

Answer 1

在按钮event.stopPropagation();处理程序中添加click。有关详细信息，请查看here和here。

Answer 2

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

style="pointer-events: none;"

这会压制<tr> onclick事件。

然而，在某些情况下，我仍然遇到似乎无效的问题。在大多数情况下，我只使用上面的风格。

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

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>

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

4 个答案: