html的鼠标双击，单击,移上，离开，事件捕捉，JavaScript 

<!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>
        *{margin: 0;
        padding: 0;
        list-style: none;
        bottom: 0;
        }
ul{
    width: 500px;
    margin: 50px auto;
}
li{
    width: 300px;
    height:50px;
    border: 1px solid black;
    line-height: 50px;
    background: rgb(141, 138, 138);
    text-align: center;
    }
    </style>
</head>
<body>
    <ul>
        <li id="li011" onclick="d()">单击事件</li>
        <li id="li012" ondblclick="s()">双击事件</li>
        <li id="li013" onmousemove="sy()">鼠标移上</li>
        <li id="li014" onmouseout="lk()">鼠标离开</li>
    </ul>
    <script>
        function d (){
            alert("单击事件捕获成功!");
        }
        function s(){
            alert("双击事件捕获成功!");
        }
        function sy(){
            alert("鼠标移上事件捕获成功!");
        }
        function lk(){
            alert("鼠标离开事件捕获成功!");
        }

    </script>
</body>
</html>
posted @ 2020-07-15 20:33  zayyo  阅读(525)  评论(0)    收藏  举报