藍藍先生(Mr.Blue)的部落格

在HTML中如果有巢狀的元件或是重疊的元件，例如下列的範例li與p，假如都加入click Event時，會發生各自執行這兩個click。

<ul id="parent">
    <li>
        click me
        <p class="contained">click to hide</p>
    </li>
</ul>

jQuery('#parent li').click(function() {
    alert('click li');
});
jQuery('.contained').click(function() {                 
    alert('click contained');
});

為了避免此問題發生，可以採用下列的方法解決

jQuery('#parent li').click(function() {
    alert('click li');
    return false;
});
jQuery('.contained').click(function() {                 
    alert('click contained');
    return false;
});

或是

jQuery('#parent li').click(function(e) {
    alert('click li');
    e.stopPropagation();
});
jQuery('.contained').click(function(e) {                 
    alert('click contained');
    e.stopPropagation();
});