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

Question

所以我有一个带有灰色背景矩形的 H3。当您单击灰色背景中的任意位置时，特定的 div 会执行 slipToggle()。这工作得很好。

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