首页 文章

对于IE 10，jQuery事件mouseenter和mouseleave没有被解雇，解决方法？

提问于
浏览 次
1

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

我发现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安全警察的事情导致从内部网加载页面脚本的麻烦 . 可能是这个问题？

javascript jquery internet-explorer

2 回答

  • -1

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

    似乎IE理解当鼠标指针进入元素的 visible 部分时必须触发mouseenter，并且当鼠标指针离开元素的 visible 部分时必须触发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是不切实际的 .

    回复于
  • 3

    请尝试使用此功能

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

相关问题