Javascript onmouseover strange behaviour in Microsoft Edge / IE

Question

I have an onmouseover for the cells on a table. In the following example I printout the content of the <td> element. If I set the focus in the <input> element and than I press and I hold the left mouse button and go over another cell the currentTarget remain the same.

This is happening in Microsoft Edge, in Chrome I get the printout of the cell over which the mouse is positioned, as expected.

 $('#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>

Semeiology

Answer 1

This is happening because in Edge when you focus the <input> element and start dragging from there the target of the event is always the <input> element. You can check this like this.

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

As the <input> element has no mouseover event handler attached, the event is passed to the parent of the <input> element, the first <td> element. So the mouseover event is fired with the <input> elements container <td> element as the eventTarget, even when you are hovering over other <td> element, which is absolutely rediculous.

If you provide more details of what are you trying to achieve, we can find any workaround, but in this case Edge is behaving differently as IE always did ;)

UPDATE: JavaScript verification and finding real event target when Edge fails:

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>

Edmea

Thx, I have supposed the same. I have a table and I want to highlight the cells (<td>) while the user is pressing the mouse button. So I have to know the "current" cell and add a css class to it. – Semeiology

Do you need to start it from the input box? – Edmea

it should be possible from every cell, so from the input box too – Semeiology

I am afraid, it won't be possible in Edge without any JavaScript hack, If that's OK I will post the simplest one soon. – Edmea