jQuery/Javascript 事件停止冒泡

Demo：

<div id='wrap'>
    <button id='btn'>btn</button>
</div>

一般情况下，两个元素分别添加点击事件，结果应该是两个事件按层级顺序触发（从里到外的顺序），

为了停止这种无止境的冒泡，我们加入 event.stopPropagation()，结果只触发 alert('b');

$('#wrap').on('click',function(){
  alert('a');
});

$('#btn').on('click', function(){
  alert('b');
  event=event||window.event;
  event.stopPropagation();
});

在实际项目中，event.stopPropagation 事件又应用在哪里呢？

如图，这是一个自写的下拉菜单，点击别的地方要怎么让它隐藏呢？

.click(function(){
    selectList.show();
    event=event||window.event;
    event.stopPropagation();
    //让事件停止冒泡
    //苹果只支持触发一次，只好改为 return false
}

$(document).click(function(e){
    selectList.hide();
});
//点击层外，隐藏这个层。由于层内的事件停止了冒泡，所以不会触发这个事件

欢迎留言与我交流