javascript - 如何从点击 javascript 中的一行中排除 标签？

Question

我在 how to make a whole row in a table clickable as a link? 找到了我的第一个答案，但现在有一个新问题:

使用

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td>
        <td>1234567</td>
        <td><a href="url://somewhere-else-than-the-row">£800,000</a></td>
    </tr>
</tbody>

和

jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.document.location = $(this).data("href");
    });
});

导致我在使用指向“url://somewhere-else-than-the-row”的最后一个链接时遇到麻烦，尤其是当我使用带有 method="delete"属性的链接时，其中“Are你确定？”弹出，但是，我不想让 window.location 运行。那么如何从 <a> 引用中排除对 window.document.location 元素的点击？

Answer 1

javascript 中的事件向上传播 dom 层次结构。你可以在这里阅读更多相关信息:What is event bubbling and capturing?

至于您的问题，您可能需要查看 jquery 的 event.stopPropagation，以防止单击事件向上传播 dom 并触发超过 1 个事件。见 http://www.w3schools.com/jquery/event_stoppropagation.asp

代码示例:

<tbody>
<tr class='clickable' data-href='url://link-for-first-row/'>
    <td>Blah Blah</td>
    <td>1234567</td>
    <td>£158,000</td>
</tr>
<tr class='clickable' data-href='url://some-other-link/'>
    <td>More money</td>
    <td>1234567</td>
    <td><span class="clickable" data-href="url://somewhere-else-than-the-row">£800,000</span></td>
</tr>

jQuery(document).ready(function($) {
    $(".clickable-row").click(function(event) {
        event.stopPropagation();
        window.document.location = $(this).data("href");
    });
});

我已对您的代码添加了 2 处更改:

• 我没有使用 <a> 标签，而是使用了带有“可点击”类的 <span> 标签
• 在事件处理程序中，我添加了对 jquery 的 event.stopPropagation 的调用，以确保只调用第一个处理程序。