[JavaScript知识库] 关于JQuery中的鼠标事件

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 关于JQuery中的鼠标事件 -> 正文阅读

[JavaScript知识库]关于JQuery中的鼠标事件

注：以下所有效果都会以此结构展示

    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 200px auto;
            transition: 0.5s;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>

1. 鼠标点击效果： mousedown

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

<script>
    $(function(){
        $("#box").mousedown(function(){
            $(this).css("background","cyan")
            $(this).html("mousedown事件发生")
        })
    })
</script>

2. 鼠标(指针)穿过效果：mouseenter

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

<script>
    $(function(){
        $("#box").mouseenter(function(){
            $(this).css("width","500px")
            $(this).html("mouseenter事件发生")
        })
    })
</script>

3. 鼠标（指针）离开效果：mouseleave

当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。

<script>
    $(function(){
        $("#box").mouseleave(function(){
            $(this).css("border-radius","50%")
            $(this).html("mouseleave事件发生")
        })
    })
</script>

4. 鼠标经过事件：mouseover
当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。

<script>
    $(function(){
        $("#box").mouseover(function(){
            $(this).css("transform","translateX(100px)")
            $(this).html("mouseover事件发生")
        })
    })
</script>

5. 鼠标离开事件：mouseout
当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。


<script>
    $(function(){
        $("#box").mouseout(function(){
            $(this).css("transform"," rotateY(-360deg)")
            $(this).html("mouseout事件发生")
        })
    })
</script>

6. 鼠标离开事件：mousemove

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标


<script>
    $(function(){
        $("#box").mousemove(function(e){
            $(this).text(e.pageX + ", " + e.pageY);
        })
    })
</script>

7. 鼠标松开事件：mouseup

当在元素上放松鼠标按钮时，会发生 mouseup 事件。

与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮才会触发该事件。


<script>
    $(function(){
        $("#box").mouseup(function(){
            $(this).css("transform"," skew(-30deg,20deg)")
            $(this).html("mouseup事件发生")
        })
    })
</script>