Question

有一些mouseout / mouseleave个问题并不适合我的问题，这就是我能找到的结果：

MouseOut / MouseLeave - Event Triggers on Dropdown-Menu

我似乎仍然遇到相同的行为，所以这里有。我有一个带有菜单控件的页面，显示在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尝试过这些）小提琴：https://jsfiddle.net/9wb77r6z/6/

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

jQuery（尝试2）小提琴：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

代替使用// The number of tPoitn objects found var total_tPoints = 0; // The values of the "touches" value within the tPoint objects var tPoint_touches = []; // Returns an array of the keys of "package" === ["package", "package1"] var packageContentKeys = Object.keys( packageContents[ Object.keys(packageContents)[0] ] ); // Loop through that array for (var i = 0; i < packageContentKeys.length; i++) { // Get the individual "package#" object // base object "packages" "package1", "package2", etc var individual_package = packageContents[ Object.keys(packageContents)[0] ] [ packageContentKeys[i] ]; // Get the tPoint object var individual_tPoint = individual_package.tpoint; // If it exists, then we do stuff if (individual_tPoint !== undefined) { // Increment the total number of tPoint objects total_tPoints++; // Push a string with the value of the touches value tPoint_touches.push("tPoint" + " = " + individual_tPoint.touches); } } // Print the stuff console.log("Total tPoints: " + total_tPoints); console.log("tPoint Array: [" + tPoint_touches + "]"); / mouseout事件，这是现在在Chrome和IE11中为我工作的解决方案：

mouseleave

以上是捕获目标控件并映射其外部坐标。然后$("#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); } }); });事件检测鼠标位置是否在映射坐标之外，这样可以用克隆克隆和替换控件（这是一种模仿{{1}的聪明方法这是一种魅力。）

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

通过IE11中的点击触发下拉鼠标输出/鼠标离开事件

1 个答案: