鼠标事件

最新推荐文章于 2023-07-31 16:53:40 发布

why陈默破晓

最新推荐文章于 2023-07-31 16:53:40 发布

阅读量209

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/whycmpx/article/details/78119284

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                border: 1px solid black;
                width: 260px;
                height: 300px;
                float: left;
            }
            p{
                /*border: 1px solid black;*/
                background-color: darkseagreen;
                width: 260px;
                height: 100px;
                line-height: 100px;
                text-align: center;
            }
        </style>
        <script>

            function dj () {
                alert("点击事件");
            }
            function sj(){
                alert("双击事件");
            }
            function axsb(){
                alert("按下鼠标事件");
            }
            function sksban(){
                alert("松开鼠标按钮");
            }
            function qku(){
                alert("松开鼠标按钮");
            }


            var a=0;
            var b=0;
            var c=0;
            var d=0;
            var e=0;
            var f=0;
            var g=0;

            function mym(){
                a++;
                var font = document.getElementById("w");
                font.innerHTML = a;
            }
            function mye(){
                b++;
                var font = document.getElementById("h");
                font.innerHTML = b;
            }
            function myl(){
                c++;
                var font = document.getElementById("y");
                font.innerHTML = c;
            }

            function myo(){
                d++;
                var font = document.getElementById("c");
                font.innerHTML = d;
            }
            function myout(){
                e++;
                var font = document.getElementById("j");
                font.innerHTML = e;
            }
            function myw(){
                f++;
                var font = document.getElementById("ww");
                font.innerHTML = f;
            }
            function mys(){
                g++;
                var font = document.getElementById("hh");
                font.innerHTML = g;
            }
        </script>
    </head>
    <body>

        <botton onclick="dj()">点击</botton><br />
        <font ondblclick="sj()">双击</font><br />
        <font onmousedown="axsb()">按下鼠标</font><br />
        <font onmouseup="sksban()">松开鼠标按钮</font><br />
        <font onkeyup="qku()">哈哈</font>


        <div onmousemove="mym()">
            <font id="w">0</font>
            <p>鼠标移动 onmousemove</p>
        </div>
        <div onmouseenter="mye()">
            <font id="h">0</font>
            <p>鼠标移入 onmouseenter</p>
        </div>
        <div onmouseleave="myl()">
            <font id="y">0</font>
            <p>鼠标移出 onmouseleave</p>
        </div>

        <div onmouseover="myo()">
            <font id="c">0</font>
            <p>鼠标移入 onmouseover</p>
        </div>
        <div onmouseout="myout()">
            <font id="j">0</font>
            <p>鼠标移出 onmouseout</p>
        </div>
        <div onmousewheel="myw()">
            <font id="ww">0</font>
            <p>鼠标滚动onmousewheel</p>
        </div>
        <div onscroll="mys()">
            <font id="hh">0</font>
            <p>鼠标在元素上滚动onscroll</p>
        </div>

    </body>
</html>