首页 > 编程笔记 > JavaScript笔记 > jQuery事件 阅读:213

jQuery mousedown和mouseup事件

当用户按下鼠标时,会触发 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>C语言中文网</h1>
    <hr />
    <input id="btn" type="button" value="按钮" />
</body>
</html>
预览效果如图 1 所示。
鼠标按下和松开
图 1:鼠标按下和松开

在实际开发中,mousedown、mouseup 和 mousemove 经常用来配合实现拖拽、抛掷等效果。

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章