为什么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不在事件路径中。