其他17---解決onmouseover多次觸發問題
阿新 • • 發佈：2022-04-01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bo{
width:100%;
background-color: #7fffd4;
transition:top 1.5s;
}
</style>
</head>
<body>
<div class="box">
<div class="box1" style="position:relative;width:500px;height:300px;border:1px solid red;overflow: hidden;">
<img src="./image/4.jpg" alt="" style="width:500px;height:300px;">
<div style="position:absolute;top:240px;background-color: bisque;" class="bo">
<h3>你好明天</h3>
<p>你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天你好明天</p>
</div>
</div>
</div>
<script>
var item=document.getElementsByClassName('box1')[0]
var bo=document.getElementsByClassName('bo')[0]
item.onmouseover = function(ev)
{
var ev=ev||window.event;
if(!isMouseLeaveOrEnter(ev,this)){return false;}
bo.style.top=0+'px'
};
item.onmouseout = function(ev)
{
var ev=ev||window.event;
if(!isMouseLeaveOrEnter(ev,this)){return false;}
bo.style.top=240+'px'
};
//消除onmouseover和onmouseout重複執行，這是關鍵程式碼
function isMouseLeaveOrEnter(e, handler) {
if (e.type != 'mouseout' && e.type != 'mouseover') return false;
var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
while (reltg && reltg != handler)
reltg = reltg.parentNode;
return (reltg != handler);
}
</script>
</body>
</html>