jQuery滑鼠事件彙總

滑鼠事件是指使用者在移動滑鼠光标或者點選任意滑鼠鍵時觸發的事件，有單擊，輕按兩下，移入，移出等滑鼠事件。

文法和用法如下：

1.hover([over,]out):模仿懸停事件的方法，當滑鼠移動到一個元素的時候會觸發第一個函數，移出這個元素時會觸發第二個函數。

例如：滑鼠懸停的表格加上特定的類

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
           

2.click([[data],fn]):滑鼠單擊事件

例如：觸發頁面内所有段落的點選事件

$("p").click();
           

3.dblclick([[data],fn])：當輕按兩下元素時，會發生 dblclick 事件。

例如：給頁面上每個段落的輕按兩下事件綁上 “Hello World!” 警告框

$("p").dblclick( function () { alert("Hello World!"); });
           

4.mousedown([[data],fn])：當滑鼠指針移動到元素上方，并按下滑鼠按鍵時，會發生 mousedown 事件。

例如：當按下滑鼠按鈕時，隐藏或顯示元素：

$("button").mousedown(function(){
  $("p").slideToggle();
});
           

5.mouseenter([[data],fn])：當滑鼠指針穿過元素時，會發生 mouseenter 事件。該事件大多數時候會與mouseleave 事件一起使用。

與 mouseover 事件不同，隻有在滑鼠指針穿過被選元素時，才會觸發 mouseenter 事件。如果滑鼠指針穿過任何子元素，同樣會觸發 mouseover 事件。

例如：當滑鼠指針進入（穿過）元素時，改變元素的背景色：

$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});
           

6.mouseleave([[data],fn])：當滑鼠指針離開元素時，會發生 mouseleave 事件。該事件大多數時候會與mouseenter 事件一起使用。與 mouseout 事件不同，隻有在滑鼠指針離開被選元素時，才會觸發 mouseleave 事件。如果滑鼠指針離開任何子元素，同樣會觸發 mouseout 事件。

例如：當滑鼠指針離開元素時，改變元素的背景色：

$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});
           

7.mousemove([[data],fn])：當滑鼠指針在指定的元素中移動時，就會發生 mousemove 事件。

mousemove事件處理函數會被傳遞一個變量——事件對象，其.clientX 和 .clientY 屬性代表滑鼠的坐标

例如：獲得滑鼠指針在頁面中的位置：

$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});
           

8.mouseout([[data],fn])：當滑鼠指針從元素上移開時，發生 mouseout 事件。

該事件大多數時候會與 mouseover 事件一起使用。

例如：當滑鼠從元素上移開時，改變元素的背景色：

$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});
           

9.mouseover([[data],fn])：當滑鼠指針位于元素上方時，會發生 mouseover 事件。

該事件大多數時候會與 mouseout 事件一起使用。

例如：當滑鼠指針位于元素上方時時，改變元素的背景色：

$("p").mouseover(function(){
  $("p").css("background-color","yellow");
});
           

10.mouseup([[data],fn])：當在元素上放松滑鼠按鈕時，會發生 mouseup 事件。

與 click 事件不同，mouseup 事件僅需要放松按鈕。當滑鼠指針位于元素上方時，放松滑鼠按鈕就會觸發該事件。

例如：當松開滑鼠按鈕時，隐藏或顯示元素：

$("button").mouseup(function(){
  $("p").slideToggle();
});