鼠标按下弹起事件

游鹄君2025年4月30日小于 1 分钟

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠标按下 弹起事件</title>
  <style type="text/css">
    #dv
    {
     width:200px;
     height:200px;
     border:solid 5px blue;
     background:lightgreen;
    }
  </style>
</head>
<body>
  <div id='dv'></div>
  <script type="text/javascript">
  var dv=document.getElementById('dv');
  //鼠标按下事件
  dv.onmousedown=function()
  {
    this.style.background='orange';
 
  }
  //鼠标弹起事件
  dv.onmouseup=function()
  {
    this.style.background='url("./001.png")';
    this.style.width='500px';
    this.style.height='500px';
    this.style.transition='all 5s 0.2s';
    this.style.border='solid 10px yellow';
  }
  </script>
</body>
</html>