javascript - 如何禁止单击链接也调用连接到其父容器的 JavaScript 事件？

Question

我在 html 表格中有一行连接到以下 JavaScript 函数:

<script type='text/javascript'>
        $(window).load(function () {
            $(".clickable").click(function () {

                $(this).next().toggle();

            });
        }); 

此函数直接展开此行下方的一些内容。我在这一行中也有一个链接，用于点击进入另一个页面。它看起来像这样:

当我点击链接时，它会在导航到它应该去的页面之前快速展开内容。

我如何更改它以便在单击链接时调用扩展额外内容的 JavaScript 函数转到该页面？

Answer 1

在链接上，您想停止传播:

$('.myNavLink').click(function(e){
   e.stopPropagation();
});

文档链接:http://api.jquery.com/event.stopPropagation/

编辑 由于您在执行此操作时遇到困难，这里有一个实例:

http://jsfiddle.net/Vs5B8/

您会看到它有一个包含 1 行的表格，其中一个单元格中有一个链接:

<table>
    <tr class="clickable">
        <td> one </td>
        <td> two </td>
        <td> <a href='http://www.google.co.uk' class="myNavLink"> click me </a> </td>
    </tr>
</table>

我在行上连接了一个点击事件:

$('.clickable').click(function(){
   alert("row click");
});

因此，在行中的任意位置单击都会提示 row click，甚至在您单击超链接时也会如此。但是，将点击事件添加到 a 以停止传播将停止此行为(即，点击链接时不显示警报):

$('.myNavLink').click(function(e){
   e.stopPropagation();
});