javascript中的mouseover和mouseout事件無法正常工作

Question

我正在嘗試制作一個div，該div在鼠標懸停在其父div上時彈出，並在mouseout消失。 但是，當我在該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>

Answer 1

這里的問題是，當inner上升到光標的位置時，由於它位於box元素的“頂部”，因此從技術上講，您不再位於box元素的“上方”。 因此，將觸發mouseout事件。

如果您將pointer-events: none添加到您的CSS聲明的inner ，這將起作用，因為您告訴該元素忽略指針事件。 這樣，被遮擋的元素（ box ）將接收事件。

這是一個固定的小提琴。

同樣，在分配事件處理程序時，您不應使用onmouseover或onmouseout HTML屬性，而應通過addEventListener接口進行操作。 （哪個是IE8中的attachEvent ，順便說一句）

Answer 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/

javascript中的mouseover和mouseout事件無法正常工作

問題描述

2 個解決方案

解決方案1
2 2014-01-14 18:18:27

解決方案2
1 已采納 2014-01-14 18:30:33

javascript中的mouseover和mouseout事件無法正常工作

問題描述

2 個解決方案

解決方案1 2 2014-01-14 18:18:27

解決方案2 1 已采納 2014-01-14 18:30:33

解決方案1
2 2014-01-14 18:18:27

解決方案2
1 已采納 2014-01-14 18:30:33