jQuery 鼠标事件

本文将解释根据鼠标在特定 HTML 元素上的位置发生的不同鼠标事件。

jQuery 中的鼠标事件：

• mouseenter 和 mouseleave
• mouseup 和 mousedown
• 鼠标悬停和鼠标移开

的mouseenter和鼠标离开：当鼠标放置在HTML元素和当鼠标被从元件除去发生鼠标离开事件发生MouseEnter事件。

Javascript

  

    

  

    Original Text
  
  
    
        $("document").ready(function () {
            $("#key").mouseenter(enter);
            $("#key").mouseleave(leave);
            function enter() {
                $("#key").text(
                    "mouseenter event has occured");
            }
            function leave() {
                $("#key").text(
                    "mouseleave event has occured");
            }
        });
    

  

输出：

• 在加载网页时：
  
• MouseEnter 和 MouseLeave 事件：
  

MouseUp 和 MouseDown 事件：

mouseup和mousedown需要单击鼠标才能发生。

Javascript

    
        Original Text
    
        
        
          $("document").ready(function()
           { 
              $("#key").mouseup(up);
              $("#key").mousedown(down);
              function up()
               {
                 $("#key").text("mouseup event has occured");
               }
              function down()
               {
                 $("#key").text("mousedown event has occured");
               }
          });
        

输出：

• 在登陆网页上：
  
• MouseUp 和 MouseDown 事件：
  

鼠标悬停和鼠标移开：

当鼠标放在某个特定的 HTML 元素上时，就会发生这些事件。

Javascript

   
    
        Original Text
    
    
        
            $("document").ready(function()
           { 
              $("#key").mouseover(over);
              $("#key").mouseout(out);
               function over()
                {
                  $("#key").text("mouseover event has occured");
                }
               function out()
                {
                  $("#key").text("mouseout event has occured");
                }
          });
           

输出：

• 正在加载网页：
  

• MouseOver 和 MouseOut 事件：