IE 10 未触发 JQuery 事件 mouseenter 和 mouseleave，解决方法？

Question

更新：找到可能的原因，当我确认后我会发布它作为答案

我发现了一些关于 IE 行为的有趣之处。

与我在 jsfiddle 上发布的示例相反，我的原始页面在背景中显示了一张图片（抱歉省略了它，我认为它不相关）。不是作为 CSS 背景属性，而是作为带有 mouseenter/mouseleave 事件处理程序的 div 之前的 img 元素。我不使用 z-index 属性（并且我已经确认使用它不会改变任何内容）我发现在这种情况下（img 元素后跟应在其上呈现的绝对定位的 div）IE 只会触发 mouseleave/mouseenter div可见部分的事件。就我而言，我通过向所有 div 添加 (border-style:solid) 和相当大的 (border-width) 来发现这一点。 IE 在鼠标指针进入 div 的边框时触发 mouseenter，然后在鼠标指针不再超过边框像素时触发 mouseleave，即使它在 div 内（可能是因为 div 是透明的）。如果没有边框（如我的原始代码），则没有 mouseenter 事件。

在 jsfiddle 中，这没有被复制。但是如果我添加 img 元素应该是 100% 可重现的。

可能的解决方法（我现在将对其进行测试并更新）：div 背景像素不得透明，否则将在指针不再超过边框像素后立即触发 mouseleave，如果没有边框，则不会触发 mouseenter/mouseleave被解雇了。对所有像素为 1% 不透明的 div 使用 png 背景图像应该可以解决问题。也许 css opacity 属性（没有任何背景图像但具有纯色背景）也可以工作。

更多信息：

• 我的文档类型是
• 我需要背景图片是img元素，不实用 在这种情况下使用 CSS 背景属性。

原问题：

IE 10 控制台未提供任何有用信息。我开始在脚本的不同部分使用 console.log 并得出结论，对于 IE 10，mouseenter 和 mouseleave 不会被触发，在其他 IE 版本中不确定。在 Chrome 和 Firefox 中运行良好，并且可能在 Opera 中运行。

此代码导致控制台中没有输出（对于 IE）。它至少应该打印“IE TEST 2”。

console.log("IE TEST 1"); // OK
$(".show_on_mouseenter").mouseenter(function (evt) {
    console.log("IE TEST 2"); // nothing is print
    showContent(this);
});

$(".hide_on_mouseleave").mouseleave(function (evt) {hideContent(this)});

console.log("IE TEST 3"); // OK

现在我将尝试使用鼠标悬停来模拟 mouseenter/mouseleave。但如果代码能像现在这样在 IE 上运行，那就太好了。

我试图在 jsfiddle 中仅复制代码的相关部分。这次它也适用于 IE 10。在这些代码行之前我什么都没做，也许是我的风格导致了问题。我修改了我的 css 以使内容 div 和控制 div 从一开始就可见，它们的位置和大小与 IE 10 中的预期一致。我原来的 hideContent 和 showContent 函数比我在 jsfiddle 显示的代码更多，但它们不是问题，因为在我的 IE 10 中它们没有被调用，因为之前的 console.log() 行没有被执行。

jsfiddle 上的代码显示脚本的行为方式。将鼠标移到 div 上，出现另一个 div，然后将鼠标移出第一个 div，内容再次隐藏。你会看到很多可疑的值，比如“left: 14.321px”。那是因为我的原始代码计算左侧、顶部、宽度和高度并产生未截断的值，因为我测试过的每个浏览器都接受这些值，我只是让它们作为双精度值。还有一些是百分比，但在 jsfiddle 中我在所有情况下都使用 px 因为我是手动输入的。

http://jsfiddle.net/xhzCL/

由于某种原因，此代码在 IE 10 中有效。jquery 版本与我使用的相同。我无法在 jsfiddle 中复制问题。

更多信息：除了我自己的 console.log() 行之外，控制台很清晰。我正在从连接到我的路由器的另一台机器上运行的 http 服务器下载我的页面。我记得一些关于 IE 安全警察导致从 Intranet 加载页面脚本的问题。可能是这个问题吗？

Answer 1

除了console.log()行之外，控制台之所以清晰，是因为Javascript代码没有任何问题。 css或html没有错。问题在于 IE 10（可能还有同一浏览器的其他版本）的行为方式。

似乎 IE 理解当鼠标指针进入元素的 可见 部分时必须触发 mouseenter，而当鼠标指针离开 visible 部分时必须触发 mouseleave的元素。如果元素下方没有任何东西（视觉上），则情况并非如此，但是当 div 下方有东西时情况会发生变化，并且由于 div 没有内容或背景颜色，可以通过它看到其他元素的像素。添加 css 属性 background-color: white 和 opacity: 0.0001 很容易使 IE 在这种特定情况下表现得像所有其他浏览器一样，而背景色不会变得明显。

必须使用 IE 10（可能是 9 也可能是 8）访问以下链接，因为其他浏览器（Firefox、Chrome、Opera、Safari）在任何情况下都会触发这些事件。

• 演示重现问题：http://jsfiddle.net/xhzCL/5/
• Demo解决问题：http://jsfiddle.net/xhzCL/6/
• 更新：通过使用两个内部 div 可以有可见的边框并且仍然具有一致的跨浏览器行为：http://jsfiddle.net/xhzCL/9/

区别在于这两行css：

background-color: white;
opacity: 0.0001;

或者使用 jquery：

$(".show_on_mouseenter").css("background-color", "white").css("opacity", "0.0001");

请注意，建议的解决方案还将隐藏应该触发鼠标事件的 div 的边框。这对于 OP 需求来说是可以的，对于其他情况可能就不行了。尝试记住 div 在 demo 1 中的位置，然后用鼠标指针到那里，当指针在整个 div 主体上时，文本将可见，无论具体在哪里，而在 demo 1 中，文本仅在以下情况下可见指针位于边框像素上方，当指针靠近 div 中心时将隐藏（与所有其他浏览器的行为相反）。

如果 OP 从一开始就包含了 img 元素，其他人也会遇到同样的问题并找到类似的解决方案。抱歉，我确定 img 与此无关，将整页代码粘贴到 jsfiddle 是不实用的。

Answer 2

尝试改用这个

$(".show_on_mouseenter").on("mouseenter", function (evt) {
console.log("IE TEST 2"); // nothing is print
showContent(this);
});