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在用户点击module-header div时切换module-body div，如下所示：

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

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

Answer 1

根据您的上一段，我认为您的标题中有一个链接，您希望用户在没有module-header点击处理的情况下点击该链接，导致module-body切换。

要允许此操作，您需要在点击<a>的位置拦截事件，并使用stopPropagation：

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

这将允许您点击链接，而不会将事件冒泡到module-header的点击处理程序。 Quirks Mode有一个useful article。

jQuery onClick in <div>，忽略<a> element within it</a> </div>

1 个答案: