javascript - 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）相当大的尺寸来发现这一点。当鼠标指针进入div的边界时，IE会触发mouseenter，然后，即使鼠标指针不在div内，鼠标指针也不会越过边界像素（可能是因为div是透明的），IE才会触发mouseleave。如果没有边界（作为我的原始代码），则没有mouseenter事件。

在jsfiddle中，未复制。但是，如果添加img元素，则应100％可复制。

可能的解决方法（我现在将对其进行测试并更新）：div背景像素一定不能透明，否则在指针不再位于边界像素上方后立即触发mouseleave，如果没有边界，则不会触发mouseenter / mouseleave。使用png背景图片作为div，所有不透明度为1％的像素都可以解决问题。也许css opacity属性（没有任何背景图像，但具有纯背景色）也可能起作用。

更多信息：


我的文档类型是<！DOCTYPE html>
我需要将背景图片作为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

现在，我将尝试使用mouseover模拟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”。那是因为我的原始代码会计算left，top，width和height并产生不被截断的值，因为我测试过的每个浏览器都接受这些值，所以我只是将它们设置为double。也有一些是以百分比表示的，但是在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，而当鼠标指针离开元素的可见部分时必须触发mouseleave。如果在元素下方没有任何东西（在视觉上），则情况并非如此，但是当div之下有东西时情况会发生变化，并且由于div没有内容或背景色，因此可以通过该元素看到其他元素的像素。添加CSS属性background-color：白色和不透明度：0.0001可以轻松使IE在这种特定情况下像所有其他浏览器一样工作，而不会让背景色变得引人注目。

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


演示重现问题的演示：http://jsfiddle.net/xhzCL/5/
演示解决问题的示例：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在演示1中的位置，然后用鼠标指针移至该位置，当指针位于整个div主体上方时，文本将可见，无论确切的位置是什么，而在演示1中，该文本仅在指针位于边框的像素上方，并且当指针靠近div的中心时将隐藏（与所有其他浏览器的行为相反）。

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