针对IE 10的jQuery事件mouseenter和mouseleave没有解雇,解决方法?

时间:2014-02-15 12:44:11

标签: javascript jquery internet-explorer

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

我发现IE行为很有趣。

反对我在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事件。

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

可能的解决方法(我现在将对其进行测试并更新):div背景像素不能是透明的,否则在指针不再位于边框像素之后将立即触发mouseleave,如果没有边框则没有mouseenter / mouseleave将是被解雇。对于具有所有像素的div,使用png背景图像1%opaque应该可以解决问题。也许css opacity属性(没有任何背景图像但具有纯色背景)也可能有用。

更多信息:

  • 我的doctype是<!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

现在我将尝试使用鼠标悬停模拟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安全警察的事情导致从内部网加载页面脚本的麻烦。可能是这个问题?

2 个答案:

答案 0 :(得分:3)

除了console.log()行之外,控制台清除的原因是因为Javascript代码没有任何问题。 css或html没什么问题。问题是IE 10(以及可能是同一浏览器的其他版本)的行为方式。

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

必须使用IE 10(可能是9个,可能是8个)访问以下链接,因为其他浏览器(Firefox,Chrome,Opera,Safari)无论如何都会触发事件。

区别在于这两条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体上时文本将是可见的,无论究竟是什么,在演示1中,文本只有在指针位于边框的像素上,并且当指针靠近div的中心时将隐藏(与所有其他浏览器的行为相反)。

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

答案 1 :(得分:-1)

尝试使用此代替

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