针对IE 10的jQuery事件mouseenter和mouseleave没有解雇，解决方法？ [英] JQuery events mouseenter and mouseleave not fired for IE 10, workaround?

问题描述

更新：找到可能的原因，当我确认它时，我会将其作为回答发布

Update: found possible cause, when I confirm it I will post it as an answer

我发现了一些有关IE行为的有趣信息。

I found something interesting about IE behaviour.

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

Opposed to the example I posted on jsfiddle, my original page shows an image in the background (sorry for omitting it, I considered it not relevant). Not as a css background property but as an img element that comes before the divs with the mouseenter/mouseleave event handlers. I do not use z-index property (and I already confirmed that use it changes nothing) I found that when this is the case (an img element followed by absolute positioned divs that should render on top of it) IE only fires mouseleave/mouseenter events on visible parts of the divs. In my case, I discovered this by adding (border-style: solid) and a (border-width) of considerable size to all the divs. IE fires mouseenter when mouse pointer enters the div's border and then fires mouseleave when mouse pointer is no more over the border pixels even if it is inside the div (probably because the div is transparent). If no borders (as my original code) no mouseenter events.

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

In jsfiddle this was not reproduced. But if I add the img element should be 100% reproducible.

可能的解决方法（我将立即测试并更新）：div背景像素不能透明或mouseleave将在指针不再位于边框像素之后立即触发，如果没有边框则不会触发mouseenter / mouseleave。对于具有所有像素的div，使用png背景图像1％opaque应该可以解决问题。也许css不透明度属性（没有任何背景图像但具有纯色背景）也可能有效。

Possible workaround (I will test it right now and update): div background pixels must not be transparent or mouseleave will be fired right after the pointer is no more over the border pixels, if no borders then no mouseenter/mouseleave will be fired. Use a png background image for the divs with all pixels 1% opaque should do the trick. Maybe the css opacity property (without any background image but with a solid background color) may work too.

更多信息：

• 我的doctype是<！DOCTYPE html>


• 我需要背景图片作为img元素，不实用
  in这种情况下使用css背景属性。

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

IE 10 console is not providing any useful information. I started to use console.log in different parts of the script and come to the conclusion that mouseenter and mouseleave aren't fired for IE 10, don't sure in other IE versions. Works OK in Chrome and Firefox, and probably Opera.

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

This code result in no output in the console (for IE). It should at least prints "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，就像现在一样。

For now I will try to emulate mouseenter/mouseleave using mouseover. But It would be great If the code just works on IE as It is now.

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

I tried to replicate only the relevant part of the code in jsfiddle. This time It worked for IE 10 too. I'm doing nothing really before those lines of code, maybe are my styles that are causing the problem. I modified my css to make the content divs and control divs visible from the start and they position and size is as expected in IE 10. My original hideContent and showContent functions have more code that the one I showing at jsfiddle but they aren't the problem because in my IE 10 they aren't being called as the previous console.log() line is not executed.

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

Code at jsfiddle showing how the script should behave. You move the mouse over the div, and another div appears, then you move the mouse out of the first div, and the content is hidden again. You will see a lot of suspicious values like "left: 14.321px". That is because my original code calculates left, top, width and height and produces not truncated values, as every browser I have tested accepted those values, I simply let them as doubles. Also some of them are as percentages, but in jsfiddle I used px in all cases because I'm entering them manually.

http://jsfiddle.net/xhzCL/

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

For some reason this code works in IE 10. jquery version is the same I'm using. I cannot replicate the problem in jsfiddle.

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

More info: Console is clear except for my own console.log() lines. I'm downloading my page from an http server running in another machine connected to my router. I remember something about an IE security police causing troubles with scripts of pages loading from intranet. May be this the problem?

推荐答案

除了console.log（）行以外控制台清除的原因是因为那里在Javascript代码中没有错。 css或html没什么问题。问题是IE 10（以及可能是同一浏览器的其他版本）的行为。

The reason why the console is clear except for the console.log() lines is because there is nothing wrong in the Javascript code. Nothing wrong with the css or html. The problem is how IE 10 (and probably other versions of the same browser) behaves.

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

It seems that IE understands that mouseenter must be fired when the mouse pointer enters a visible part of the element and mouseleave must be fired when mouse pointer leaves a visible part of the element. This is not the case if nothing is below the element (visually) but things change when there is something below the div and due to div having no content or background-color the other element's pixels can be seen through it. Adding the css properties background-color: white and opacity: 0.0001 easily makes IE behave like all other browsers for this specific situation without the background-color becoming noticeable to the eye.

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

The following links must be visited using IE 10 (probably 9 and maybe 8) as other browsers (Firefox, Chrome, Opera, Safari) will fire the events in any case.

• 演示再现问题： http://jsfiddle.net/xhzCL/5/


• 演示解决问题： http://jsfiddle.net/xhzCL/6/


• 更新：通过使用两个内部div可以有可见的边框并且仍然具有一致的跨浏览器行为： http://jsfiddle.net/xhzCL/9/

• Demo reproducing the problem: http://jsfiddle.net/xhzCL/5/
• Demo solving the problem: http://jsfiddle.net/xhzCL/6/
• Update: by using two inner divs is possible to have visible borders and still have consistent cross browser behaviour: http://jsfiddle.net/xhzCL/9/

区别在于这两条css行：

The difference are in these two css lines:

background-color: white;
opacity: 0.0001;

或者使用jquery：

Or with jquery:

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

请注意，建议的解决方案还会隐藏应该触发鼠标事件的div的边框。对OP的需求没问题，对其他情况可能不太好。尝试记住div在demo 1中的位置，然后用鼠标指针去那里，当指针在整个div体上时文本将是可见的，无论究竟是什么，在演示1中，文本只有在指针在边框的像素上方，当指针靠近div的中心时（将与所有其他浏览器的行为相反）隐藏。

Note that the proposed solution will hide also the borders of the div that should fire the mouse events. That's OK with OP needs, may not be OK for other situations. Try to remember where the div was in demo 1, then go there with the mouse pointer, the text will be visible while the pointer is over the full div body, no matters where exactly, while in demo 1 the text will be visible only when the pointer is over the border's pixels and will hide when the pointer is near the center of the div (opposed to the behaviour of all other browsers).

如果包含OP img元素从一开始就会遇到同样的问题，并找到了类似的解决方案。对不起，我确信img与此无关并将整页代码粘贴到jsfiddle中是不切实际的。

If OP had included the img element from the beginning others would run into the same problem and found a similar solution. Sorry for that, I was sure the img was not related to this and paste the full page code into jsfiddle was not practical.

这篇关于针对IE 10的jQuery事件mouseenter和mouseleave没有解雇，解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！