如何在点击折叠元素内链接时跳过触发 Bootstrap 折叠？

Question

我正在使用Twitter Bootstrap的折叠功能来隐藏表格行。同时，我在span中的文本中有一个链接可以触发展开/折叠。不幸的是，当我点击链接时，折叠的文本会先展开，然后才会跳转链接。

我希望在点击链接时能够跳过触发折叠切换。以下是一些代码，演示了此问题(这里是实时jsfiddle示例):

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

- dbn

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/

- MustDie1Bit

---

感谢您不仅提供了即时解决方案，还提供了文档/上下文。 - dbn

Answer 2

你可以在链接上添加一个类<a class="outsidelink" href="http://getbootstrap.com/css/">，然后在js内部执行以下操作。

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

编辑：正如@MustDie1Bit指出的那样，preventDefault()会阻止所有事件，您可以使用e.stopPropagation();代替。

- Mihnea Belcin

---

e.preventDefault()不会停止事件冒泡。在这里阅读更多信息：http://api.jquery.com/event.preventdefault/ - MustDie1Bit

这似乎与我所寻找的相反。 - dbn