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中，当你点击它们时它会被执行，但实际点击容器只会执行一次

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

2 个答案: