Dropdown mouseout / mouseleave events triggered by click in IE11

Question

There are a handful of mouseout / mouseleave questions that don't quite fit my problem, with this being the closes I could find:

MouseOut / MouseLeave - Event Triggers on Dropdown-Menu

I still seem to experience the same behavior, so here goes. I have a page with a menu control that is shown on hover and hidden on mouseout - On this page I also have a dropdown control near the top of the page, close enough to where a couple of the menu items expose the hover menu to where it would normally cover the dropdown control. This is fine when the dropdown is closed.

If user opens the dropdown then mouses up and over one of the menu items that exposes the hover menu, the menu now appears behind the open dropdown control. This behavior is not desired, so my plan was to blur() the dropdown on mouseout to force it closed. This all works fine in chrome, but not in IE.

HTML:

<select name="child5" id="child5">
  <option value="1">Item - 1</option>
  <option value="2">Item - 2</option>
  <option value="3">Item - 3</option>
  <option value="4">Item - 4</option>
  <option value="5">Item - 5</option>
</select>
<br/>
<div id="sometext"></div>

jQuery (attempt 1, also previously tried these with mouseout) Fiddle: https://jsfiddle.net/9wb77r6z/6/

$(document).ready(function () {        
    $("#child5").mouseleave(function () {
        $(this).blur();
    });
});

jQuery (attempt 2) Fiddle: https://jsfiddle.net/9wb77r6z/9/

$(document).ready(function () {        
    $("#child5").mouseleave(function (e) {
        if (e.target.id == $(this).attr("id")) {
            $(this).blur();
        } else {
            alert("nope!");
        }
    });
});

Expected behavior can be witnessed in Chrome. When the dropdown is clicked and open, it remains open until an item is selected (click) or the user triggers mouseout / mouseleave (i've tried both, both work in Chrome but not IE11).

When the user clicks the dropdown in IE11, it almost immediately triggers the mouseleave event, triggering my $("#child5").blur(); which essentially makes the dropdown useless with the mouse.

Anyone have ideas? Thanks

mjw mjw · Accepted Answer · 2017-06-28T20:35:11

In lieu of using the mouseout / mouseleave events, this is the solution that's now working for me in Chrome and IE11:

$("#child5").mouseover(function (e) {
    var t = $(this);
    var offset = t.offset();
    var xMin = offset.left;
    var yMin = offset.top;
    var xMax = xMin + t.innerWidth();
    var yMax = xMin + t.innerHeight();
    $(document).mousemove(function (e) {
        if (e.pageX < xMin || e.pageX > xMax - 2 || e.pageY < yMin || e.pageY > yMax) {                    
            $(this).unbind('mousemove');
            var fakeSelect = t.clone(true);
            t.replaceWith(fakeSelect);
        }
    });
});

The above is capturing the target control and mapping its outer coordinates. Then the mousemove event detects if the mouse position is outside of the mapped coordinates so the control can be cloned and replaced with the clone (this is a clever way of mimicking the blur that works a charm).

Fiddle: https://jsfiddle.net/9wb77r6z/11/

Dropdown mouseout / mouseleave events triggered by click in IE11

1 Answers