拖拽看板人员元素后误触发其他元素mouseenter事件的问题求助

问题背景 #

我基于一个旧 fiddle 做了个可拖拽人员到不同区块的看板，人员div在mouseenter事件触发时显示提示框。测试时发现，拖拽人员放下后偶尔会触发其他人员的提示框，于是做了个简化版项目排查（仅记录mouseenter事件）。

异常现象 #

• 拖拽「Person A」到「Block B」放下后，有时会记录「Person B」的hover事件，但并非每次都会出现
• 补充：放下后如果快速移开鼠标，会触发拖拽起始点当前所在元素的mouseenter事件

推测原因 #

拖拽Person A经过Person B时，放下后可能触发Person B的mouseenter事件，触发时机可能和放下位置有关，但无法确定具体规律。

需求 #

拖拽过程中禁用所有mouseenter事件

HTML 代码 #

<div class="container">
  <div class="board" id="board">

    <div class="block" id="aaa" ondrop="drop(event)" ondragover="allowDrop(event)">
      <strong>Block A</strong>
      <div class="person" id="pa" draggable="true" ondragstart="drag(event)"><span>Person A</span></div>
      <div class="person" id="pb" draggable="true" ondragstart="drag(event)"><span>Person B</span></div>
      <div class="person" id="pc" draggable="true" ondragstart="drag(event)"><span>Person C</span></div>
    </div>

    <div class="block" id="bbb" ondrop="drop(event)" ondragover="allowDrop(event)">
      <strong>Block B</strong>
    </div>

  </div>
  <textarea id="log" rows="8"></textarea>
</div>

JavaScript 代码 #

function drag(ev) {
  $("#log").val(""); //reset log on drag
  ev.dataTransfer.setData("text", ev.target.id);
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.currentTarget.appendChild(document.getElementById(data));
}

$(document).ready(function() {
  $(document).on("mouseenter", ".person", function() {
    $("#log").val($("#log").val() + "\nHover on " + $(this).text());
  });
});

内容的提问来源于stack exchange，提问作者EirikR