当用户按下鼠标时，会触发 mousedown 事件；当用户松开鼠标时，则会触发 mouseup 事件。mousedown 表示鼠标按下的一瞬间所触发的事件，而 mouseup 表示鼠标松开的一瞬间所触发的事件。当然，我们都知道只有“先按下”才能“再松开”。
举例：鼠标按下和松开
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <script src="js/jquery-1.12.4.min.js"></script>
- <script>
- $(function () {
- $("#btn").mousedown(function(){
- $("h1").css("color", "red");
- })
- $("#btn").mouseup(function () {
- $("h1").css("color", "black");
- })
- })
- </script>
- </head>
- <body>
- <h1>城东书院</h1>
- <hr />
- <input id="btn" type="button" value="按钮" />
- </body>
- </html>
预览效果如图 1 所示。
在实际开发中，mousedown、mouseup 和 mousemove 经常用来配合实现拖拽、抛掷等效果。
湘公网安备 43102202000103号
