IE11中点击触发的下拉mouseout/mouseleave事件

Question

有一些 mouseout / mouseleave 问题不太符合我的问题，这是我能找到的结尾：

我似乎仍然遇到同样的行为，所以开始吧。我有一个带有菜单控件的页面，该菜单控件显示在 hover 上并隐藏在 mouseout 上 - 在该页面上，我在页面顶部附近也有一个下拉控件，足够靠近几个菜单项将悬停菜单暴露在它通常覆盖下拉控件的位置。当下拉菜单关闭时，这很好。

如果用户打开下拉菜单，然后将鼠标悬停在显示悬停菜单的菜单项之一上，菜单现在显示在打开的下拉控件后面。这种行为是不可取的，所以我的计划是 blur() mouseout 上的下拉菜单强制关闭。这一切在 chrome 中都可以正常工作，但在 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（尝试 1，之前也用 mouseout 尝试过这些）Fiddle：https://jsfiddle.net/9wb77r6z/6/

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

jQuery（尝试 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!");
        }
    });
});

可以在 Chrome 中看到预期的行为。单击并打开下拉菜单时，它会保持打开状态，直到选择一个项目（单击）或用户触发 mouseout / mouseleave （我都试过了，都在 Chrome 中工作但是不是 IE11).

当用户在 IE11 中单击下拉菜单时，它几乎立即触发了 mouseleave 事件，触发了我的 $("#child5").blur();，这实际上使下拉菜单无法使用鼠标。

有人有想法吗？谢谢

Answer 1

代替使用 mouseout / mouseleave 事件，这是现在在 Chrome 和 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);
        }
    });
});

以上是捕获目标控件并映射其外坐标。然后 mousemove 事件检测鼠标位置是否在映射坐标之外，因此可以 克隆控件并用克隆替换 （这是模仿的巧妙方法=14=] 很有魅力）。

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

IE11中点击触发的下拉mouseout/mouseleave事件

Dropdown mouseout / mouseleave events triggered by click in IE11

javascript

jquery

internet-explorer-11