为什么 mouseup 事件没有为子元素触发？答案

【问题标题】：Why mouseup event didn't fire for child element?为什么 mouseup 事件没有为子元素触发？
【发布时间】：2016-02-26 09:59:46
【问题描述】：

给定带有一些 div 的 DOM：

<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 具有以下“mousedown”处理程序：

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 触发。问题是：为什么 '#graph' div 没有触发 'mouseup' 事件？
示例草图在这里：https://jsfiddle.net/beem/w49L14t3/1/.
此处，当 '#main' 或 '#graph' div 触发 'mouseup' 事件时，底部的 2 个 'indicator' div 分别显示文本 'cleared'。在 Chromium 47.0.2526.73 和 Firefox 43 上测试。

【问题讨论】：

尝试更改注册事件监听器的顺序。 $('#graph').on('mousemove', show2); $('#graph').on('mouseup', clear2); $('#main').on('mousemove', 拖动); $('#main').on('mouseup', clear1);

标签： javascript jquery html css

【解决方案1】：

似乎 'mouseup' 事件在可拖动的 '.device' div 中触发，然后在它的父 '#devices' div 中触发，然后在它的父 '#main' div 中触发。这可以从我下一个版本的 sn-p 中看出：https://jsfiddle.net/beem/w49L14t3/4。

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

所以“#graph”div 不在事件路径之外。

【讨论】：