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

最新推荐文章于 2022-07-06 09:28:59 发布

zayyo

最新推荐文章于 2022-07-06 09:28:59 发布

阅读量400

点赞数

分类专栏：前端文章标签： javascript css3 html html5

本文链接：https://blog.csdn.net/weixin_45215308/article/details/106291872

版权

前端专栏收录该内容

106 篇文章 5 订阅

订阅专栏

<!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>

zayyo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
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; .
复制链接

扫一扫