onmouseenter 和 onmouseover 的不同

来源：互联网发布：windows 8.1k KN 编辑：程序博客网时间：2024/05/29 19:20

该实例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。
onmousemove 事件在鼠标移动到 div 元素上时触发。
mouseenter 事件在鼠标指针进入 div 元素时触发，唯一的区别是 onmouseenter 事件不支持冒泡。
onmouseover 事件在鼠标指针进入 div 元素时触发 ,在子元素上也会触发(p 和 span)。

<!DOCTYPE html><html><head><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, onmouseenter 和 onmouseover 的不同。</h3><p> onmousemove 事件在鼠标移动到 div 元素上时触发。</p><p> mouseenter 事件在鼠标指针进入 div 元素时触发。 </p><p> onmouseover 事件在鼠标指针进入 div 元素时触发,唯一的区别是 onmouseenter 事件不支持冒泡 ,在子元素上也会触发(p 和 span)。</p><div onmousemove="myMoveFunction()">  <p>onmousemove: <br> <span id="demo">鼠标移动到我这!</span></p></div><div onmouseenter="myEnterFunction()">  <p>onmouseenter: <br> <span id="demo2">标移动到我这!</span></p></div><div onmouseover="myOverFunction()">  <p>onmouseover: <br> <span id="demo3">标移动到我这!</span></p></div><script>x = 0;y = 0;z = 0;function myMoveFunction() {    document.getElementById("demo").innerHTML = z+=1;}function myEnterFunction() {    document.getElementById("demo2").innerHTML = x+=1;}function myOverFunction() {    document.getElementById("demo3").innerHTML = y+=1;}</script></body></html>

引自：www.runoob.com

0 0