鼠标按下与抬起事件demo，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10

            
            <button 
  id="btn" 
  onmousedown="btnDown()" 
  onmouseup="btnUp()"
>
  按钮
</button>

<p>点击执行一段函数，松开按钮执行另一段函数</p>

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11

            
            body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #ccc;
}
#btn {
  padding:6px 15px ;
}

格式化

            
                1
2
3
4
5
6
7
8

            
            function btnDown() {
  console.log('鼠标按下')
}

function btnUp() {
  console.log('鼠标抬起了')
}

预览

控制台