javascript - 表行充当链接的问题

Question

所以这里是有问题的表格行:

<table cellpadding="0" cellspacing="0" class="list-table">

<tr class="altrow">
    <td><a href="/customers/view/114"> John </a></td>
    <td> Doe </td>
    <td> New York</td>
    <td> U.S. </td>
    <td>
        <form action="/customers/move/114" name="post_53d64eb8923c0608217922" id="post_53d64eb8923c0608217922" style="display:none;" method="post"><input type="hidden" name="_method" value="POST"/><input type="hidden" name="data[_Token][key]" value="da894058fd17e5e886316512509967a6969af90f" id="Token366355528"/><div style="display:none;"><input type="hidden" name="data[_Token][fields]" value="d4431eb33bd022aaf88ee331efb5b9a47e305ab9%3A" id="TokenFields1654703212"/><input type="hidden" name="data[_Token][unlocked]" value="" id="TokenUnlocked97706993"/></div></form><a href="#" onclick="if (confirm('Are you sure you want to move this customer?')) { document.post_53d64eb8923c0608217922.submit(); } event.returnValue = false; return false;"><img src="/img/move.png" alt="move" width="30px" height="30px" title="Move to archive" /></a>  
    </td>
</tr>

</table>

整行充当包含在第一个 TD 中的链接.这是由 jQuery 像这样完成的:

$('tr.altrow').click( function(e) {
    if(!$(e.target).closest('[target="_blank"]').length) window.location = $(this).find('a').attr('href');
}).hover( function() {
    $(this).toggleClass('hover');
 });

问题是每当最后一个TD单击(表格)，要求用户确认，但之后是第一个链接 (<a href="/customers/view/114">)被调用而不是表单操作。如果 jQuery 被注释掉，则一切正常。

我想要实现的是，如果用户单击最后一个 TD 的图像，将调用表单操作，如果单击是在该行的其他任何位置，则 <a>会被调用。

非常感谢任何关于如何使这两个链接以这种方式工作的指导或建议。

Answer 1

在最后一个 td(表单)上添加一个点击处理程序。确保捕获此点击事件，并防止它冒泡到 tr 元素。

$('tr.altrow').find('td').last().click(function(event){
    event.stopPropagation();
});

进一步阅读:event.stopPropagation()