为什么鼠标向上事件没有为子元素触发

Why mouseup event didn't fire for child element?

本文关键字：元素 鼠标 事件 为什么      更新时间：2023-09-26

给定带有一些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>
具有

类"device"的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);
}

此处理程序应该允许通过鼠标移动"设备"元素。移动过程正常，但"鼠标向上"事件仅针对"#main"div 触发，该div 是"#graph"div 的父级。问题是：为什么"鼠标向上"事件没有为"#graph"div 触发？
示例草图在这里：https://jsfiddle.net/beem/w49L14t3/1/。
在这里，当"#main"或"#graph"div触发"鼠标向上"事件时，底部的 2 个"指示器"div 分别显示文本"已清除"。在 Chromium 47.0.2526.73 和 Firefox 43 上测试。

似乎

"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 远离事件路径。

相关文章：