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

Question

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

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

当然，我可以排除超链接的 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 knockout :

Note 3: Allowing the default click action
By default, Knockout will prevent the click event from taking any default action. This means that if you use the click binding on an a tag (a link), for example, the browser will only call your handler function and will not navigate to the link’s href.
<...>
However, if you do want to let the default click action proceed, just return true from your click handler function.

还有:

Note 4: Preventing the event from bubbling
<...>
If necessary, you can prevent the event from bubbling by including an additional binding that is named clickBubble and passing false <...>

我认为这样的事情应该有效:

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