鼠标事件移入移出的比较

来源：互联网发布：知天气福建版数值预报编辑：程序博客网时间：2024/05/22 21:55

鼠标移入事件onmouseover
鼠标移出事件onmouseout
鼠标移入事件onmouseenter
鼠标移出事件onmouseleave

鼠标进出div盒子的效果不同
简单效果图如下：
鼠标事件移入移出

源代码如下：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            div{                width: 300px;                height: 300px;                border: 1px solid #000000;                float: left;                margin: 10px 20px;            }            div p{                background-color: gray;                color: #FFFFFF;                text-align: center;                height: 50px;                line-height: 50px;            }        </style>        <script>            var a = 0;//声明            var b = 0;            var c = 0;            var d = 0;            var e = 0;            //鼠标移动事件            function myMove(){                a++; // a = a + 1;                var font = document.getElementById("a");//获取font标签对象                font.innerHTML = a;            }            //鼠标移入事件over            function myOver(){                b++;                var font = document.getElementById("b");//获取font标签对象                font.innerHTML = b;            }            //鼠标移出事件out            function myOut(){                c++;                var font = document.getElementById("c");//获取font标签对象                font.innerHTML = c;            }            //鼠标移入事件enter            function myEnter(){                d++;                var font = document.getElementById("d");//获取font标签对象                font.innerHTML = d;            }            //鼠标移出事件leave            function myLeave(){                e++;                var font = document.getElementById("e");//获取font标签对象                font.innerHTML = e;            }        </script>    </head>    <body>        <div onmousemove="myMove()">            <font id="a">0</font>            <p>鼠标移动事件onmousemove</p>        </div>        <!--事件冒泡-->        <div onmouseover="myOver()">            <font id="b" style="border: 1px solid #000000;">0</font>            <p>鼠标移入事件onmouseover</p>        </div>        <div onmouseout="myOut()">            <font id="c">0</font>            <p>鼠标移出事件onmouseout</p>        </div>        <div onmouseenter="myEnter()">            <font id="d">0</font>            <p>鼠标移入事件onmouseenter</p>        </div>        <div onmouseleave="myLeave()">            <font id="e">0</font>            <p>鼠标移出事件onmouseleave</p>        </div>    </body></html>

阅读全文

0 0