JQuery鼠标事件

Posted 2021-06-11 是小叶的呢.

html部分：

        <button class="btn1">jQuery鼠标事件之click</button><br />
        <button class="btn2">jQuery鼠标事件之dbclick</button><br />
        <button class="btn3">jQuery鼠标事件之mousedown</button><br />
        <button class="btn4">jQuery鼠标事件之mouseup</button><br />
        <button class="btn5">jQuery鼠标事件之mouseover</button><br />
        <button class="btn6">jQuery鼠标事件之mouseout</button><br />
        <button class="btn7">jQuery鼠标事件之mouseenter</button><br />

javascript部分：

        $(".btn1").click(function () {
            alert("这是一个鼠标单击事件");
        });
        $(".btn2").dblclick(function () {
            alert("这是一个鼠标双击事件");
        });
        $(".btn3").mousedown(function () {
            alert("这是一个鼠标按下事件");
        });
        $(".btn4").mouseup(function () {
            alert("这是一个鼠标松开事件");
        });
        $(".btn5").mouseover(function () {
            alert("这是一个鼠标进入事件");
        });
        $(".btn6").mouseout(function () {
            alert("这是一个鼠标移出事件");
        });
        $(".btn7").mouseenter(function () {
            alert("这是一个鼠标穿过事件");
        });

一、 鼠标单击事件

触发每一个匹配元素的click事件，这个函数会调用执行绑定到click事件的所有函数，鼠标单击就能实现效果。

二、 鼠标双击事件

当双击元素时，会发生 dblclick 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

三、 鼠标按下事件

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

四、 鼠标松开事件

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

五、 鼠标移入事件

当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

六、 鼠标移出事件

当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

七、 鼠标穿过事件

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。