【JavaScript】鼠标十大事件简介和测试

最新推荐文章于 2024-04-29 17:01:02 发布

归忆_AC

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量1k

点赞数

分类专栏： web学习文章标签： javascript html css 前端 web js 鼠标事件

本文链接：https://blog.csdn.net/qq1677852098/article/details/132229054

版权

web学习专栏收录该内容

7 篇文章 1 订阅

订阅专栏

介绍

onclick：按下鼠标时触发。
ondblclick：在同一个元素上双击鼠标时触发。
onmousedown：按下鼠标键时触发。
onmouseup：释放按下的鼠标键时触发。
onmousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。
onmouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件。
onmouseleave：鼠标离开一个节点时触发，离开子节点不会触发这个事件。
onmouseover：鼠标进入一个节点时触发，进入子节点也会触发这个事件。
onmouseout：鼠标离开一个节点时触发，离开子节点也会触发这个事件。
onmousewheel：滚动鼠标的滚轮时触发。

测试原理

每个鼠标事件设置一个按钮或方块，检测对应事件，在控制台查看输出，具体内容查看代码注释并自行尝试。

测试代码

<!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>
    #btn5 {
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .fu {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 200px;
      margin: 50px 0px;
      background-color: gray;
    }

    .zi {
      width: 40px;
      height: 40px;
      background-color: gray;
    }

    #btn6 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 120px;
      height: 120px;
      background-color: green;
    }

    #btn7 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 120px;
      height: 120px;
      background-color: blue;
    }

    #btn8 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 120px;
      height: 120px;
      background-color: yellow;
    }

    #btn9 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 120px;
      height: 120px;
      background-color: orange;
    }

    #btn10 {

      width: 100px;
      height: 100px;
      background-color: purple;
    }
  </style>
</head>

<body>

  <button id="btn1">单击</button>
  <button id="btn2">双击</button>

  <button id="btn3">鼠标按下</button>
  <button id="btn4">鼠标抬起</button>

  <div id="btn5"></div>

  <div class="fu">
    <div id="btn6">
      <div class="zi"></div>
    </div>
  </div>
  <div class="fu">
    <div id="btn7">
      <div class="zi"></div>
    </div>
  </div>

  <div class="fu">
    <div id="btn8">
      <div class="zi"></div>
    </div>
  </div>
  <div class="fu">
    <div id="btn9">
      <div class="zi"></div>
    </div>
  </div>

  <div id="btn10"></div>

  <script>

    //单击和双击事件
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");

    btn1.onclick = function () {
      console.log("单击事件");
    }

    btn2.ondblclick = function () {
      console.log("双击事件");
    }

    //鼠标按下和鼠标抬起
    var btn3 = document.getElementById("btn3");
    var btn4 = document.getElementById("btn4");

    btn3.onmousedown = function () {
      console.log("鼠标按下");
    }

    btn4.onmouseup = function () {
      console.log("鼠标抬起");
    }

    //鼠标移动
    var btn5 = document.getElementById("btn5");

    btn5.onmousemove = function () {
      console.log("鼠标移动");
    }

    //鼠标进入和鼠标离开(子节点不生效)
    var btn6 = document.getElementById("btn6");
    var btn7 = document.getElementById("btn7");

    btn6.onmouseenter = function () {
      console.log("鼠标移入");
    }

    btn7.onmouseleave = function () {
      console.log("鼠标移出");
    }

    //鼠标进入和鼠标离开(子节点不生效)
    var btn8 = document.getElementById("btn8");
    var btn9 = document.getElementById("btn9");

    btn8.onmouseover = function () {
      console.log("鼠标移入2");
    }

    btn9.onmouseout = function () {
      console.log("鼠标移出2");
    }

    //鼠标滚轮
    var btn10 = document.getElementById("btn10");
    btn10.onmousewheel = function () {
      console.log("鼠标滚轮");
    }

  </script>

</body>

</html>

（by 归忆）

归忆_AC

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】鼠标十大事件简介和测试

onclick：按下鼠标时触发。ondblclick：在同一个元素上双击鼠标时触发。onmousedown：按下鼠标键时触发。onmouseup：释放按下的鼠标键时触发。onmousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。onmouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件。onmouseleave：鼠标离开一个节点时触发，离开子节点不会触发这个事件。onmouseover：鼠标进入一个节点时触发，进入子节点也会触发这个
复制链接

扫一扫