jQuery中鼠标事件mousexxx的执行顺序

jQuery语句模板

$(selector).action(...)
如：的鼠标单击事件：

$("button").click(function() {
  // statements;
});

以下几种鼠标事件用法相似。

jQuery 鼠标事件顺序

mouseenter 鼠标移入元素上方
mouseover 鼠标在元素上方
mousemove 鼠标在元素上方且移动。
mouseout 鼠标出了元素边界
mouseleave 鼠标完全离开元素

mousedown 按下鼠标
mouseup 松开鼠标

hover(afterOverFn, afterLeaveFn) afterOverFn在mouseover之后触发，afterLeaveFn在mouseleave之后触发。
顺序：enter -> over -> move(多次) -> out -> leave
按键顺序：down -> up

html code

    
    
    
    
    
    
    
    
    


    
鼠标事件
    
鼠标事件顺序：enter, over, move(多次), out, leave
    
鼠标点击：down, up

页面：

移动鼠标至div上方，移出，点击鼠标左键。
测试结果：

hover(afterOverFn, afterLeaveFn)

修改：

$(function() {
    mouseEventTest();
});

为：

$(function() {
    mouseEventTest();
    // $(selector).hover(overFn, leaveFn);
    $("#mouseTest").hover(
        function afterMouseOver() {
            console.log("hover afterMouseOver");
        },
        function afterMouseLeave() {
            console.log("hover afterMouseLeave");
        }
    );
});

测试：