时间戳

首页 > 解决方案 > 如果用户单击该行上的折叠按钮，如何禁用整行的 onclick？

javascript - 如果用户单击该行上的折叠按钮，如何禁用整行的 onclick？

问题描述

window.location单击按钮后如何防止调用它？

<tr onclick="window.location='www.google.com'">

    <td>Toggle Button</td>

    <td style="text-align:left;">

        <button class="btn btn-link text-info" data-toggle="collapse" data-target="#company@item.Id">
            Details
        </button>

        <div id="myitems5" class="collapse">
            items
            items
            items
        </div>

    </td>
</tr>

标签： javascripttwitter-bootstrap

解决方案

最小变化的方式是这样的：

<tr onclick="if (!event.target.closest('button[data-toggle]')) { window.location = '//www.google.com'; }">

...这表示如果事件通过button带有data-toggle属性的 a 传递到tr，则您不执行任何操作，但如果确实执行了此操作window.location（请注意那里的字符串修复）。

但我不会那样做。我会使用适当的事件处理程序，可能是表中的一个委托，并在该事件处理程序中进行检查。

例如：

theTable.addEventListener(function(e) {
    var tr = e.target.closest("tr");
    if (tr && this.contains(tr)) {
        var btn = e.target.closest("button[data-toggle]");
        if (!btn || !tr.contains(btn)) {
            window.location = "//www.google.com";
        }
    }
});

在这两种情况下，代码都使用了Element#closest，您可能需要在过时的浏览器上进行 polyfill。

推荐阅读