javascript 中的 mouseover 和 mouseout 事件无法正常工作答案

【问题标题】：mouseover and mouseout events in javascript not working in proper mannerjavascript 中的 mouseover 和 mouseout 事件无法正常工作
【发布时间】：2014-01-14 18:08:55
【问题描述】：

我正在尝试制作一个 div，它在鼠标悬停在其父 div 上时弹出并在鼠标移出时消失。但是当我在那个 div 区域中输入鼠标时，它并没有显示出明显的高度增加，而是即使鼠标在该区域内轻微移动，它的高度也会不断上下闪烁（即鼠标没有被带出该区域滑动时）。

查看工作代码：http://jsfiddle.net/ankur3291/xN5bS/

首先，我想知道 mouseover 和 mouseout 事件是如何工作的（它们的真正含义），其次，它的补救措施是什么？我基本上是在纯 javascript 中找到解决方案，但 jQuery 代码也是可观的。请参阅下面的完整代码：

<!DOCTYPE html>
<html>
<head>
<title>js height check</title>
<style type="text/css">
#box{display:block;height:200px;width:200px;border:1px solid #000;position:relative;}
#inner{display:none;height:0;opacity:0.6;background-color:#000;width:200px;position:absolute;bottom:0;}
</style>
<script type="text/javascript">
function heightUp()
{
var h=20;
var obj=document.getElementById("inner");
obj.style.display="block";
function frame()
{
    h=h+5;
    obj.style.height=h+"px";
    if(h>=150)
        clearInterval(timer1);
}
var timer1=setInterval(frame,10);
}
function heightDown()
{
var obj=document.getElementById("inner");
var h=parseInt(obj.style.height);
document.getElementById("matter").innerHTML=h;
function frame()
{
    h=h-5;
    obj.style.height=h+"px";
    if(h>=30)
    {
        obj.style.display="none";
        clearInterval(timer2);
    }
}
var timer2=setInterval(frame,10);
//obj.style.height-=100+'px';
}
</script>
</head>
<body>
<div id="box" onmouseover="heightUp()" onmouseout="heightDown()">
<div id="inner">
</div>
</div>
<p id="matter">h</p>
</body>
</html>

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

这里的问题是，当inner 上升到您的光标点时，由于它位于box 元素的“顶部”，因此从技术上讲，您不再“超过”box 元素。因此，mouseout 事件触发。

如果您将pointer-events: none 添加到inner 的CSS 声明中，这将起作用，因为您告诉该元素忽略指针事件。这样，被遮挡的元素 (box) 将接收事件。

这是a fiddle with it fixed。

此外，您在分配事件处理程序时不应使用onmouseover 或onmouseout HTML 属性，而应通过addEventListener 接口进行。（在 IE8 中是 attachEvent，顺便说一句）

【讨论】：

实际上我想在那个黑色弹出 div 中放一些链接，所以制作 pointer-events:none 将使锚标签无用（无法工作）......否则你的代码工作正常......但是目的没有解决。想象一个照片库，在照片上用指针指向一个黑色透明屏幕，上面写着一些动作，我们可以单击任何选项来发生事件。

【解决方案2】：

首先，事件分别做

MouseOver：鼠标经过此元素（当您将鼠标移到此元素上时会一直调用，这就是问题所在）
MouseOut：鼠标离开元素区域

但最好和最简单的方法来实现你想要的效果是通过 jquery 来做如下

$(document).ready(function(){
  $("#box").hover(function(){
    //Mouse Enter

    $("#inner").animate({height: "200px"}, 500);
  },function(){
    //Mouse Leaves

    $("#inner").clearQueue();
    $("#inner").animate({height: "0px"}, 500);
  });

});

工作链接 http://jsfiddle.net/xN5bS/1/

【讨论】：

您应该删除小提琴中 HTML 中的 onmouseover 和 onmouseout 声明，因为它们不再被使用。
另外，可以说，最简单的修复方法是将pointer-events: none 添加到#inner 的CSS，但我离题了:)
我忘了从 HTML 中删除调用 :)，你可能是最简单的方法是对的，但是使用 jquery 更简单，因为你有框架为你做动画，最后最好的方法取决于代码的目的，对吧？
Ankur Shah，清除动画堆栈，如果您将鼠标快速移动到 div 上，您会创建一个可能会破坏页面的调用堆栈！ clearQueue() 阻止创建此堆栈