关于js中的鼠标事件

最新推荐文章于 2024-05-30 11:55:45 发布

努力搬砖丿

最新推荐文章于 2024-05-30 11:55:45 发布

阅读量8.5k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_54144126/article/details/125511698

版权

一、常用到的鼠标事件

类型	事件
click	单击鼠标左键时发生，如果右键也按下则不会发生
dbclick	双击鼠标左键时发生，如果右键也按下则不会发生
mousedown	单击任意一个鼠标按钮时发生
mouseout	鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover	鼠标指针移出某个元素到另一个元素上时发生
mouseup	松开任意一个鼠标按钮时发生
mousemove	鼠标在某个元素上时持续发生

二、鼠标点击事件

鼠标点击事件包括 click（单击）、dblclick（双击）、mousedown（按下）和 mouseup（松开）四个。其中 click 事件类型比较常用，而 mousedown 和 mouseup 事件类型多用在鼠标拖放、拉伸操作中。当这些事件处理函数的返回值为 false 时，会禁止绑定对象的默认行为。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
<script>
  var box=document.querySelector('.box')
  box.onclick=function(){
    this.style.backgroundColor='skyblue'
    // 鼠标点击后盒子变蓝
  }
</script>
</html>

二、鼠标经过事件

鼠标经过包括移过和移出两种事件类型。当移动鼠标指针到某个元素上时，将触发 mouseover 事件；而当把鼠标指针移出某个元素时，将触发 mouseout 事件。如果从父元素中移到子元素中时，也会触发父元素的 mouseover 事件类型。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
<script>
  var box=document.querySelector('.box')
  box.onmouseover=function(){
    this.style.backgroundColor='skyblue'
    // 鼠标移入后盒子变蓝
  }
  box.onmouseout=function(){
    this.style.backgroundColor='black'
    // 鼠标移出后盒子变黑
  }
</script>
</html>

二、鼠标移动事件

mousemove 事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发 mousemove 事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢以及浏览器跟踪更新的速度。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
<script>
  var box=document.querySelector('.box')
  box.onmousemove=function(){
    this.style.backgroundColor='skyblue'
    // 鼠标在盒子内移动后盒子变蓝
  }

</script>
</html>