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

I have a table with 4 rows that are repeated by a knockout foreach in the <tbody>. The first row is a Basketball Match and the other 3 rows are the Task performers (referee etc) of the match. I have in the match row a hyperlink to a details page of the location of the sportshall in the city were the match will be played.

我有一个有4行的表,在中由一个淘汰的foreach重复。第一行是篮球比赛,另外三行是比赛的任务执行者(裁判等)。我在比赛行中有一个超链接,指向该城市运动员所在位置的详细信息页面,将进行比赛。

The problem is that the performer rows can be expanded and collapsed. This all works fine but now the hyperlink is not working anymore because then the knockout click event is fired. When I do a right mouse click on the hyperlink and say "open in new tab" the hyperlink works fine. So the problem is that the row knockout click is overruling the hyperlink.

问题是表演者行可以展开和折叠。这一切都很好但现在超链接不再工作,因为然后触发了淘汰赛点击事件。当我右键单击超链接并说“在新选项卡中打开”时,超链接工作正常。所以问题是行淘汰点击是否超越了超链接。

Of course I can exclude the TD of the hyperlink and add the collapse click event to the other TDs but that is not what I want.

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

1 个解决方案

#1

From the documention to 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.

注3:允许默认单击操作默认情况下,Knockout将阻止click事件采取任何默认操作。这意味着,如果您在标签(链接)上使用单击绑定,则浏览器将仅调用您的处理程序函数,而不会导航到链接的href。 <...>但是,如果您确实希望继续执行默认单击操作,则只需从单击处理函数返回true。

And:

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

注意4:防止事件冒泡<...>如果需要,可以通过包含名为clickBubble的附加绑定并传递false <...>来防止事件冒泡。

I think something like this should work:

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

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

#1