javascript - 单击 jQuery 按钮内的 span

Question

作为一个更大的解决方案的一部分，我有手风琴式的 jQuery 控件，它将标题实现为 jQuery 切换按钮。每个标题还必须有一个帮助气球。简而言之，设置类似于此 jsFiddle上发布的设置。

<div id="button1">Go to main action <span id="span1" style="color:blue">Help</span>     </div>
<div id="out"/>
$('#button1').button().click(function(){
    $('#out').text('Button clicked');
});

$('#span1').click(function(){
    $('#out').text('Span clicked');
});

是否可以这样做，以便我可以单击位于按钮 div 内的帮助范围？或者，按钮是否总是会获取其所有内容的事件，以防止内部元素获取点击事件？

谢谢你。

Answer 1

您的事件首先触发span，然后也触发button。您可以通过方法阻止在父级上触发事件stopPropagation()。另外，return false做同样的事情。

Fiddle for demonstration

$('#span1').click(function(e){
    $('#out').text('Span clicked');
    e.stopPropagation();
});

Answer 2

或者：

$('#span1').click(function(){
    $('#out').text('Span clicked');
    return false;
});

jSfiddle http://jsfiddle.net/kxntf/5/