Microsoft Edge/IE 中的 Javascript onmouseover 奇怪行为

Question

我对表格上的单元格有一个 onmouseover。在下面的示例中，我打印出 <td> 的内容元素。如果我将焦点设置在 <input>元素，然后按下并按住鼠标左键并越过另一个单元格，currentTarget 保持不变。

这发生在 Microsoft Edge 中，在 Chrome 中，我得到了鼠标所在单元格的打印输出，正如预期的那样。

 $('#tableProperties').on('mouseover','.mycell', tdMouseover);
 
 function tdMouseover(e) {
    var mycell = e.currentTarget;
    console.log("myCell: "+mycell.textContent);
    }
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <table width="500px" id="tableProperties">
          <tr><td class="mycell"><input value="Cell 1"></input></td></tr>
          <tr><td class="mycell">Cell 2</td></tr>
          <tr><td class="mycell">Cell 3</td></tr>
          <tr><td class="mycell">Cell 4</td></tr>
          <tr><td class="mycell">Cell 5</td></tr>
          <tr><td class="mycell">Cell 6</td></tr>
</table>

Answer 1

发生这种情况是因为在 Edge 中，当您聚焦 <input> 时元素并从那里开始拖动事件的目标始终是<input>元素。你可以这样检查。

function tdMouseover(e) {
    console.log(e.target); // always the input in Edge 
}

作为 <input>元素没有 mouseover附加事件处理程序，事件传递给 <input> 的父级元素，第一个 <td>元素。所以鼠标悬停事件是用 <input> 触发的元素容器 <td>元素作为 eventTarget，即使您将鼠标悬停在其他 <td> 上元素，这绝对是荒谬的。

如果您提供有关您要实现的目标的更多详细信息，我们可以找到任何解决方法，但在这种情况下，Edge 的行为与 IE 始终不同；)

更新: Edge 失败时的 JavaScript 验证和寻找真正的事件目标:

var $currentHoverElement=null;
$('#tableProperties').on('mouseover','.mycell', tdMouseover);

function tdMouseover(e) {
  var $hoverElement = $(e.currentTarget), hoffset=$hoverElement.offset();
  /* Check if this is the real over Element */
  if(e.clientY<hoffset.top||e.clientY>hoffset.top+$hoverElement.outerHeight()){
    console.log("Finding out real hover element");
    var $actual=$('.mycell').filter(function(i,el){
      var $el=$(el),eoffset=$el.offset();
      return e.clientY>eoffset.top&&e.clientY<eoffset.top+$el.height();
    });
    if($actual.length)$hoverElement=$actual.eq(0);
  }
  if($currentHoverElement)$currentHoverElement.removeClass('hovered');
  $hoverElement.addClass('hovered');
  $currentHoverElement=$hoverElement;
}

.hovered{
  color: red;
}
.hovered input{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table width="500px" id="tableProperties">
  <tr>
    <td class="mycell">Cell 1</td>
  </tr>
  <tr>
    <td class="mycell"><input value="Cell 2"></td>
  </tr>
  <tr>
    <td class="mycell">Cell 3</td>
  </tr>
  <tr>
    <td class="mycell">Cell 4</td>
  </tr>
  <tr>
    <td class="mycell">Cell 5</td>
  </tr>
  <tr>
    <td class="mycell">Cell 6</td>
  </tr>
</table>