jquery鼠標點擊事件

定義和用法：

成都創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、澗西網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5技術、成都做商城網(wǎng)站、集團公司官網(wǎng)建設、外貿網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為澗西等各大城市提供網(wǎng)站開發(fā)制作服務。

當點擊元素時，會發(fā)生 click 事件。

當鼠標指針停留在元素上方，然后按下并松開鼠標左鍵時，就會發(fā)生一次 click。

click() 方法觸發(fā) click 事件，或規(guī)定當發(fā)生 click 事件時運行的函數(shù)。

鼠標事件是在用戶移動鼠標光標或者使用任意鼠標鍵點擊時觸發(fā)的。

1、click事件：點擊鼠標左鍵時觸發(fā)

$('p').click(function(){});

示例：

123 $('p').click(function(){ ? ? ? ?alert('click function is running !'); ? ? ? });

2、dbclick事件：迅速連續(xù)的兩次點擊時觸發(fā)

$('p').dbclick(function(){});

示例：

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

3、mousedown事件：按下鼠標時觸發(fā)

$('p').mousedown(function(){});

示例

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

4、mouseup事件：松開鼠標時觸發(fā)

$('p').mouseup(function(){});

示例：

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

5、mouseover事件：鼠標從一個元素移入另一個元素時觸發(fā)

mouseout事件：鼠標移出元素時觸發(fā)

$('p').mouseover(function(){});

$('p').mouseout(function(){});

示例：

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

6、mouseenter事件：鼠標移入元素時觸發(fā)

mouseleave事件：鼠標移出元素時觸發(fā)

$('p').mouseenter(function(){});

$('p').mouseleave(function(){});

示例

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

7、hover事件

$('p').hover(

function(){},

function(){}

);

示例

123456789 $(".table_list tr").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );

8、toggle事件：鼠標點擊切換事件

$('p').toggle(

function(){},

function(){}

);

示例

12345678 $("p").toggle( function(){ $("body").css("background-color","green");}, function(){ $("body").css("background-color","red");}, function(){ $("body").css("background-color","yellow");}

jquery 怎么判斷鼠標是否在div上

有三種方法，剛好看到了這篇文章，分享給大家：

jquery判斷鼠標是否在div里的三種方法

下面是三種方法的具體源碼：

//#aijquery?就是要判斷的DIV

//方法一：

if($.contains($("#aijquery")[0],e.target)?||?$("#aijquery")[0]==e.target){

$(".info").text("鼠標在這個DIV里");

}else{

$(".info").text("鼠標不在這個DIV里");

}

//方法二：

$("#aijquery").mouseover(function(){

$(".primary").text("方法二：鼠標在這個DIV里");

}).mouseout(function(){

$(".primary").text("方法二：鼠標不在這個DIV里");

});

//方法三：

var?x=e.clientX;

var?y=e.clientY;

var?div_x_1?=?$("#aijquery").offset().left;

var?div_y_1?=??$("#aijquery").offset().top;

var?div_x_2?=?$("#aijquery").offset().left+$("#aijquery").outerWidth();

var?div_y_2?=??$("#aijquery").offset().top+$("#aijquery").outerHeight();

if(?x??div_x_1?||?x??div_x_2?||?y??div_y_1?||?y??div_y_2){

$(".danger").text("方法三：鼠標不在這個DIV里");

}else{

$(".danger").text("方法三：鼠標在這個DIV里");

}

上面給的那個鏈接里，有完整的在線實例演示的，很好，很強大！

jquery 鼠標事件

這個涉及到JS事件的冒泡~

簡單得解釋下JS事件原理，就拿你問的舉例~

1.捕獲階段，就是捕獲到事件的發(fā)生，然后執(zhí)行綁定的方法，mouseout其實是發(fā)生在最內部的li上面的，這個階段就到此為止

2.冒泡階段，之后mouseout這個動作就會沿著DOM樹一層一層向上觸發(fā)，所以在外層的div也是觸發(fā)了mouseout動作的，所以綁定在div

mouseout事件上面的方法就執(zhí)行了

還有就是關于，mouseout事件本身，這個會發(fā)生在鼠標從一個DOM移動到另一個DOM時

還是拿你的問題來說

假設現(xiàn)在鼠標在#F_M_info上，當鼠標移動到它內部的div、a或者是li，mouseout事件都會發(fā)生

所以jquery為我們提供了另外一組事件，mouseenter和mouseleave

這組事件就是純粹得從#F_M_info移進移出，而不管鼠標在其內部干了什么

但要注意，這組事件不是JS原生的，而是jquery通過計算模擬實現(xiàn)的

希望對您有幫助~

By

Billskate

前端 jQuery鼠標移入移出

mouseover() 鼠標進入（進入子元素也觸發(fā)）

mouseout() 鼠標離開（離開子元素也觸發(fā)）

mouseenter() 鼠標進入（進入子元素不觸發(fā)）

mouseleave() 鼠標離開（離開子元素不觸發(fā)）

jquery中鼠標移上和移開的動作是什么？

mouseover事件于用戶把鼠標從一個元素移動到另外一個元素上時觸發(fā)，mouseout事件于用戶把鼠標移出一個元素時觸發(fā)。\x0d\x0a下面為你詳細介紹下jquery中的鼠標事件：\x0d\x0a(1):click事件：click事件于用戶在元素敲擊鼠標左鍵，并在相同元素上松開左鍵時觸發(fā)；\x0d\x0a$('p').click(function(){\x0d\x0aalert('click function is running\x0d\x0a!');\x0d\x0a});\x0d\x0a(2):dbclick事件：dbclick事件在用戶完成迅速連續(xù)的兩次點擊之后觸發(fā)，雙擊的速度取決于操作系統(tǒng)的設置。一般雙擊事件在頁面中不經常使用；\x0d\x0a$('p').dbclick(function(){\x0d\x0aalert('dbclick function is running\x0d\x0a!');\x0d\x0a});\x0d\x0a(3):mousedown事件：mousedown事件在用戶敲擊鼠標鍵時觸發(fā)，跟keydown事件不一樣，該事件僅在按下鼠標時觸發(fā)；\x0d\x0a$('p').mousedown(function(){\x0d\x0aalert('mousedown function is\x0d\x0arunning !');\x0d\x0a});\x0d\x0a(4):mouseup事件：mouseup事件在用戶松開鼠標時觸發(fā)，如果在與按下鼠標的元素相同元素上松開，那么click事件也會觸發(fā)；\x0d\x0a$('p').mouseup(function(){\x0d\x0aalert('mouseup function is running\x0d\x0a!');\x0d\x0a}).click(function(){\x0d\x0aalert('click\x0d\x0afunction is running too !');\x0d\x0a});\x0d\x0a(5):mouseover事件：mouseover事件于用戶把鼠標從一個元素移動到另外一個元素上時觸發(fā)，如果需要知道來自那個元素可以使用，relatedTagrget屬性；\x0d\x0a(6):mouseout事件：mouseout事件于用戶把鼠標移出一個元素時觸發(fā)，這包括從父元素移動到子元素上，或者使用鍵盤跳到元素上。

jquery鼠標移入移出

mouseenter(進入)、mouseleave、mouseover(覆蓋)和mouseout是常用來判斷鼠標移出和移入的事件句柄，雖然功能上差不多，但是細節(jié)卻有不同的地方。

mouseover和mouseout在父元素和其子元素都可以觸發(fā)，當鼠標穿過一個元素時，觸發(fā)次數(shù)得依子元素數(shù)量而言。

mouseenter和mouseleave只在父元素觸發(fā)，當鼠標穿過一個元素時，只會觸發(fā)一次。

mouseover和mouseout比mouseenter和mouseleave先觸發(fā)

因此一般mouseover和mouseout一起使用，mouseenter和mouseleave一起使用