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();
});