单击折叠元素中的链接时，如何跳过触发引导折叠？

Question

我正在使用Twitter Bootstrap collapse 函数来隐藏表格行。我在触发折叠/展开的跨度内的文本中也有一个链接。不幸的是，当我点击链接时，折叠的文本首先展开，然后链接。

我希望能够在单击链接时跳过触发折叠切换。下面是一些演示该问题的代码 (live jsfiddle example here)：

<table class="table">
    <tr data-toggle="collapse" data-target="#collapseRow1" style="cursor: pointer;">
        <td>Click me to show more!</td>
        <td><a href="http://getbootstrap.com/css/">but don't expand after clicking this link</a></td>
    </tr>
    <tr class="collapse" id="collapseRow1">
        <td>hidden content1</td>
        <td />
    </tr>
</table>

Answer 1

在点击事件中使用 event.stopPropagation()。

http://api.jquery.com/event.stoppropagation/

$("table.table td a").on('click', function (e) { e.stopPropagation(); })

要了解为什么事件会在 DOM 树上冒泡，请阅读http://api.jquery.com/category/events/event-object/

Answer 2

你可以在链接<a class="outsidelink" href="http://getbootstrap.com/css/">上添加一个类，然后在js里面做这样的事情

$(".outsidelink").on('click', function (e) { e.preventDefault(); })

编辑： 正如@MustDie1Bit preventDefault() 所指出的，所有 .你可以改用e.stopPropagation();