亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

JavaScript Reference Manual / onmouseleave 事件

onmouseleave 事件

onmouseleave 事件

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<img onmouseenter="bigImg(this)" onmouseleave="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>
bigImg() 函數在用戶將鼠標指針移動到該圖像時觸發(fā)。</p>
<p>
normalImg() 函數在用戶將鼠標指針移出圖像時觸發(fā)。</p>
<script>
function bigImg(x) {
    x.style.height = "64px";
    x.style.width = "64px";
}
function normalImg(x) {
    x.style.height = "32px";
    x.style.width = "32px";
}
</script>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

在以下更多實例中點 "嘗試一下" 查看更多演示。


定義和用法

onmouseleave 事件在鼠標移除元素時觸發(fā)。

提示: 該事件通常與onmouseenter  事件一起使用, 該事件在鼠標移動到元素上時觸發(fā)。

提示:   onmouseleave 事件類似于onmouseout 事件。 唯一的區(qū)別是 onmouseleave 事件不支持冒泡 。


瀏覽器支持

表格中的數字表示支持該事件的第一個瀏覽器的版本號。

事件




OnMouseLeave在30.05.56.111.5


語法

HTML 中:

<element  onmouseleave="myScript">嘗試一下

JavaScript 中:

object.onmouseleave=function(){myScript};嘗試一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("mouseleave", myScript);嘗試一下

注意: Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。


技術細節(jié)

是否支持冒泡:沒有
是否可以取消:沒有
事件類型:的MouseEvent
支持的 HTML 標簽:所有HTML元素,除了<基>,<BDO>,結果,<HEAD>,<HTML>,<IFRAME>,<META>,<param>的<SCRIPT>,<STYLE>和<標題>



更多實例

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}
p {
    background-color: white;
}
</style>
</head>
<body>

<h3>以下實例演示了 onmousemove, onmouseleave 和 onmouseout 的區(qū)別。</h3>
<p> onmousemove 事件在鼠標移動到 div 元素上時觸發(fā)。</p>
<p> mouseleave 事件只在鼠標指針移出 div 元素時觸發(fā)。 </p>
<p> onmouseout 事件在鼠標指針移出 div 元素及離開子元素(p 和 span)時觸發(fā)。</p>
<div onmousemove="myMoveFunction()">
  <p>onmousemove: <br> <span id="demo">鼠標移入和移出!</span></p>
</div>
<div onmouseleave="myLeaveFunction()">
  <p>onmouseleave: <br> <span id="demo2">鼠標移入和移出!</span></p>
</div>
<div onmouseout="myOutFunction()">
  <p>onmouseout: <br> <span id="demo3">鼠標移入和移出!</span></p>
</div>
<script>
x = 0;
y = 0;
z = 0;
function myMoveFunction() {
    document.getElementById("demo").innerHTML = z+=1;
}
function myLeaveFunction() {
    document.getElementById("demo2").innerHTML = x+=1;
}
function myOutFunction() {
    document.getElementById("demo3").innerHTML = y+=1;
}
</script>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例