带有单击事件的表行中的超链接不起作用

Question

我有一个包含 4 行的表，这些行在 <tbody> 中被淘汰赛 foreach 重复。第一行是篮球比赛，其他 3 行是比赛的任务执行者（裁判等）。我在比赛行中有一个超链接，指向将要进行比赛的城市体育馆位置的详细信息页面。

问题在于执行者行可以展开和折叠。这一切都工作正常，但现在超链接不再工作，因为随后触发了淘汰赛点击事件。当我在超链接上单击鼠标右键并说“在新选项卡中打开”时，超链接可以正常工作。所以问题是行敲除点击推翻了超链接。

当然我可以排除超链接的 TD 并将折叠点击事件添加到其他 TD 但这不是我想要的。

<tbody data-bind="foreach: Matches">
    <tr class="hover-row" data-rowtype="Match" data-bind="click: ExpandTaskToggle">
        <td><i class="glyphicon" data-bind="css: IconExpanded"></i></td>
        <td data-bind="text: Time"></td>
        <td class="hidden-lg hidden-md" data-bind="text: Team.ShortName"></td>
        <td class="hidden-sm hidden-xs" data-bind="text: Team.Name"></td>
        <td data-bind="text: Opponent"></td>
        <td class="hidden-xs" data-bind="text: Location.City"></td>
        <td><a data-bind="text: Location.SportsHallName, attr: { href: '/SportLocation/Details/' + Location.Id() }"></a></td>
    </tr>
    <!-- ko if: IsExpanded -->
    <tr data-rowtype="Task">
        <td class="striped"></td>
        <td colspan="2" class="striped">
            <strong>Scheidsrechters </strong>
        </td>
        <td colspan="2" class="striped" data-bind="foreach: Referees">
            <span data-bind="text: PerformerFullName, style: { 'background-color': SelectedPerformerBackground }"></span><span data-bind="if: $index() != ($parent.Referees.length - 1)">, </span>
        </td>
        <td class="hidden-xs striped"></td>
    </tr>
    <tr data-rowtype="Task">
        <td class="striped"></td>
        <td class="striped">
            <strong>Scorer </strong>
        </td>
        <td class="striped" data-bind="foreach: Scorers">
            <span data-bind="text: PerformerFullName, style: { 'background-color': SelectedPerformerBackground }"></span><span data-bind="if: $index() != ($parent.Scorers.length - 1)">, </span>
        </td>
        <td class="striped">
            <strong>Timer </strong>
        </td>
        <td class="striped" data-bind="foreach: Timers">
            <span data-bind="text: PerformerFullName, style: { 'background-color': SelectedPerformerBackground }"></span><span data-bind="if: $index() != ($parent.Timers.length - 1)">, </span>
        </td>
        <td class="hidden-xs striped"></td>
    </tr>
    <tr data-rowtype="Task">
        <td class="striped"></td>
        <td colspan="2" class="striped">
            <strong>Zaalwacht </strong>
        </td>
        <td colspan="2" class="striped" data-bind="foreach: SportsHallGuards">
            <span data-bind="text: PerformerFullName, style: { 'background-color': SelectedPerformerBackground }"></span><span data-bind="if: $index() != ($parent.SportsHallGuards.length - 1)">, </span>
        </td>
        <td class="hidden-xs striped"></td>
    </tr>
    <!-- /ko -->
</tbody>

Answer 1

从documention到淘汰赛：

注意 3：允许默认点击操作
默认情况下，Knockout 会阻止点击事件执行任何默认操作。这意味着如果您在 a 标签（链接）上使用 click 绑定，例如，浏览器将只会调用您的处理函数，而不会导航到链接的 href。
<...>
但是，如果您确实想让默认点击操作继续进行，只需返回 true 来自您的点击处理函数。

还有：

注意 4：防止事件冒泡
<...>
如有必要，您可以通过包含 名为 clickBubble 并传递 false <...>

的附加绑定

我认为这样的事情应该可行：

<a data-bind="text: Location.SportsHallName, attr: { href: '/SportLocation/Details/' + Location.Id() }, click: function() { return true; }, clickBubble: false"></a>