javascript - 单击折叠元素中的链接时如何跳过触发 Bootstrap 折叠？

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/