Jquery SlideToggle，防止在特定情况下切换

Question

所以我有一个具有灰色背景矩形的 H3。当您单击该灰色背景中的任意位置时，特定的 div 将执行 slideToggle()。这很好用。

现在，在 H3 内部，我还有一个链接，该链接调用了一个执行某些操作的 jquery 函数。这也很好。

但我的问题是，由于链接在 H3 内部，因此在其函数执行后，它还会执行 slideToggle()，因为我单击了 H3 内部的某个位置。

所以问题就变成了，当我点击链接时，如何防止 slideToggle() 发生。我想我可以使用旗帜，但我希望有更优雅的方式。

任何帮助将不胜感激。

HTML 代码

<h3 id="data_id"> 
    <a href="#" id="random_id" >Random</a>   
</h3>

<div id="data_div_id">
    // The data here is irrelevant to the issue at hand
</div>

Jquery 代码

$('#data_id').click(function() {   
    $('#data_div_id').slideToggle('slow');      
}); 

$('#random_id').click(function(event) {
    // it does something irrelevant to the issue at hand
}); 

Answer 1

您可以使用 event.stopPropagation() 来阻止事件冒泡。

jsFiddle here.

$('#data_id').click(function() {   
    $('#data_div_id').slideToggle('slow');      
}); 

$('#random_id').click(function(event) {
    event.stopPropagation();
}); 

Answer 2

尝试跳过您不希望事件发生的元素：

$('#data_id').click(function(event) {   
    if (event.target !== this)
        return;
    $('#data_div_id').slideToggle('slow');      
}); 

像这样只有 #data_id 会触发切换，并且由于您的 h3 位于该 div 中，因此当您单击它们时它也会执行，但仅在实际单击容器时执行一次