爲什麼mouseup事件不會觸發子元素？

Question

鑑於DOM與一些div：

<div id="main"> 
    <div id="graph"> 

    </div> 
    <div id="devices"> 
    <div class="device"> 
     Display 
    </div> 
    <div class="device"> 
     Server 
    </div> 
    <div class="device"> 
     Player 
    </div> 
    </div> 
</div> 
<br/> 
<div id="indicator1" class="indicator"> 
indicator1 
</div> 
<div id="indicator2" class="indicator" style="background : aqua;"> 
indicator2 
</div> 

帶班「設備」的div有以下「鼠標按下」處理程序：

function itemChoose(evt) { 
    item = this; 
    inPageX = evt.pageX; 
    inPageY = evt.pageY; 
    $(item).css('position', 'relative'); 
    $('#main').on('mousemove', drag); 
    $('#graph').on('mousemove', show2); 
    $('#main').on('mouseup', clear1); 
    $('#graph').on('mouseup', clear2); 
} 

這個處理應該允許移動「設備」元素由鼠標。移動的過程可以，但'mouseup'事件只會觸發'#graph'div的父'#main'div。問題是：爲什麼'mouseup'事件沒有針對'#graph'div引發？
示例草圖位於：https://jsfiddle.net/beem/w49L14t3/1/。
這裏，當'#main'或'#graph'div分別觸發'mouseup'事件時，2個底部'指示符'div顯示'清除'文本。 Chromium 47.0.2526.73和Firefox 43測試過。

Answer 1

似乎'mouseup'事件在可拖動的'.device'div中觸發，然後在父'#devices'div中，然後在父'#main'div中觸發。這可以從我的下一個版本的片段看到：https://jsfiddle.net/beem/w49L14t3/4。

$('#main').on('mouseup', clear1); 
    $('#graph').on('mouseup', clear2); 
    $('#devices').on('mouseup', clear3); 

所以'#graph'div不在事件路徑中。