如何禁用链接上的点击也调用连接到其父容器的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();
});

Doc链接: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>

我在该行上连接了一个click事件:

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

因此,行中任何位置的单击都会发出警报row click,甚至在单击超链接时也会发出警报.但是,a向停止传播添加单击事件将停止此行为(即,单击链接时不显示警报):

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