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具有以下“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);
}

此处理程序应允许通过鼠标移动'device'元素。移动的过程是可以的，但'mouseup'事件仅针对'#main'div的父节点'#main'div触发。问题是：为什么'mouseup'事件没有触发'#graph'div？
示例草图在此处：https://jsfiddle.net/beem/w49L14t3/1/。
这里的2个底部“指示符”div分别显示“#main”或“#graph”div激活'mouseup'事件时文本'已清除'。在Chromium 47.0.2526.73和Firefox 43上进行了测试。

Answer 1

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

ssl://smtp.gmail.com:465 
xxx@gmail.com          -- gmail account
xxxx                   -- password

所以'#graph'div停留在事件路径之外。

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

1 个答案: