链接内的链接问题：将链接放置在可点击元素内答案

【问题标题】：Link within link issue: Placing a link inside a clickable element链接内的链接问题：将链接放置在可点击元素内
【发布时间】：2016-07-29 12:28:51
【问题描述】：

我有一个 HTML 表，其中包含组行，单击时可以通过 jQuery 展开和折叠其子行。每个组行包含一个跨表所有列的列。此列中有一个可打开新窗口的链接。

点击新窗口链接时出现问题。不仅新窗口打开，而且单击链接会触发组行的 onclick 事件，从而切换行组。关于如何在单击新窗口链接时防止切换同时在其他任何地方单击该行时允许切换的任何想法？

<tr class="groupRow" onclick="toggleChildRows()">  
    <td colspan="@tableColumnCount">
        <a href="@newWindowPath">New Window</a>
    </td>
</tr>

【问题讨论】：

在我看来，糟糕的设计。你能澄清什么时候应该切换和新窗口应该打开吗？
这是一个常见问题，您可以使用event.stopPropagation 将事件仅限于其元素
@Satpal 你没用过推特吗？大多数现代 Web 应用程序都有一个用例。例如，您希望能够单击列表项以打开对话线程，同时还能够在不触发外部链接的情况下单击“喜欢”或“分享”。

标签： jquery html

【解决方案1】：

我认为有更好的方法可以做到这一点，但你可以阻止链接的传播（冒泡），它会起作用：

$('a').on('click', function(event) {
  event.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onclick="alert('yeah');">
  <a href="@newWindowPath">New Window</a>
  <div>click this</div>
</div>

【讨论】：