单击IE11中的单击触发的下拉鼠标 / mouseleave事件

Question

有少数mouseout/mouseleave问题不太符合我的问题，这是我可以找到的关闭：

MouseOut/Mouseleave-下拉菜单上的事件触发器

我似乎仍然经历着相同的行为，所以就在这里。我有一个带有菜单控件的页面，该页面在hover上显示并隐藏在mouseout上 - 在此页面上，我在页面顶部附近也有一个下拉列表控件，足够接近几个菜单项将悬停菜单展示到其中的位置它通常覆盖下拉控件。关闭下拉菜单时，这很好。

如果用户打开下拉菜单，则将鼠标慕斯和播放悬停菜单的一个菜单项之一，现在菜单现在出现在后面的 。这种行为是不需要的，因此我的计划是blur() mouseout上的下拉列表以强制其关闭。这一切都很好，但在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尝试过(小提琴：https：//jsfiddle.net/9wb777r6z/6/

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

jQuery(尝试2(小提琴：https：//jsfiddle.net/9wb777r6z/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 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);
        }
    });
});

上面正在捕获目标控制并映射其外部坐标。然后，mousemove事件检测到鼠标位置是否在映射的坐标之外，因此可以用克隆来克隆并替换控件(这是模仿blur的聪明方法(。<<<<<<<<<<<<<<。/p>

小提琴：https：//jsfiddle.net/9wb77r6z/11/