javascript - <div> 中的 jQuery onClick，忽略其中的 <a> 元素

Question

我有一个非常基本的 HTML 布局，如下所示；

    <div class="module">
        <div class="module-header">
            <h2>Heading</h2>
            <a title="a" href="/" class="btn">Link</a>
        </div>
        <div class="module-body">
            <p>Boy content here.</p>
        </div>
    </div>

我有一些 jQuery 可以在用户单击模块标题 div 时切换模块主体 div，如下所示:

$('body').on("click", '.module-header', function(event) { 
    $('.module-body', $(this).parent()).slideToggle(300);       
});

我遇到的问题是，当用户单击模块 header 中的链接时，切换动画会在链接触发前运行几分之一秒。是否有选择器或我可以使用的其他方法，以便在用户单击链接时不会触发 onClick 事件？

Answer 1

根据您的最后一段，我认为您的页眉中有一个链接，您希望允许用户在没有 module-header 的情况下单击该链接的点击处理导致 module-body切换。

为此，您需要在 <a> 所在的位置拦截事件单击，并使用 stopPropagation :

$('body').on("click", '.module-header a', function (event) { 
  event.stopPropagation();
  return true;
});

这将允许您的链接被点击而事件不会冒泡到 module-header。的点击处理程序。怪癖模式有一个 useful article .