事件冒泡

jquery 在綁定特定事件時，像是 mouserenter 、 mouseleave 、 mouseover 、 mouseout 時很容易發生事件冒泡。 事件冒泡就是會在觸發某子元素時觸發父層元素

// HTML
<div id="parent">
    <div id="child"></div>
</div>

// jquery

$('#child').on('mouseenter',function(){
    console.log('觸發子元素')
});

$('#parent').on('mouseenter',function(){
    console.log('觸發父元素')
});

當我在child上綁定mouseenter，並實際觸發時會讓parent原本也有綁定mouseenter事件也跟著觸發，這是jquery的特性，叫做事件冒泡。 要阻止事件冒泡需加上event.stopPropagation(); 範例： http://codepen.io/dreamline2/pen/DsIBa/