资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

鼠标jquery,鼠标不动了按什么键恢复

jquery鼠标点击事件

定义和用法:

成都创新互联专注于企业成都全网营销推广、网站重做改版、涧西网站定制设计、自适应品牌网站建设、H5技术成都做商城网站、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为涧西等各大城市提供网站开发制作服务。

当点击元素时,会发生 click 事件。

当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。

click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。

1、click事件:点击鼠标左键时触发

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

示例:

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

2、dbclick事件:迅速连续的两次点击时触发

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

示例:

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

3、mousedown事件:按下鼠标时触发

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

示例

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

4、mouseup事件:松开鼠标时触发

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

示例:

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

5、mouseover事件:鼠标从一个元素移入另一个元素时触发

mouseout事件:鼠标移出元素时触发

$('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事件:鼠标移入元素时触发

mouseleave事件:鼠标移出元素时触发

$('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.捕获阶段,就是捕获到事件的发生,然后执行绑定的方法,mouseout其实是发生在最内部的li上面的,这个阶段就到此为止

2.冒泡阶段,之后mouseout这个动作就会沿着DOM树一层一层向上触发,所以在外层的div也是触发了mouseout动作的,所以绑定在div

mouseout事件上面的方法就执行了

还有就是关于,mouseout事件本身,这个会发生在鼠标从一个DOM移动到另一个DOM时

还是拿你的问题来说

假设现在鼠标在#F_M_info上,当鼠标移动到它内部的div、a或者是li,mouseout事件都会发生

所以jquery为我们提供了另外一组事件,mouseenter和mouseleave

这组事件就是纯粹得从#F_M_info移进移出,而不管鼠标在其内部干了什么

但要注意,这组事件不是JS原生的,而是jquery通过计算模拟实现的

希望对您有帮助~

By

Billskate

前端 jQuery鼠标移入移出

mouseover() 鼠标进入(进入子元素也触发)

mouseout() 鼠标离开(离开子元素也触发)

mouseenter() 鼠标进入(进入子元素不触发)

mouseleave() 鼠标离开(离开子元素不触发)

jquery中鼠标移上和移开的动作是什么?

mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,mouseout事件于用户把鼠标移出一个元素时触发。\x0d\x0a下面为你详细介绍下jquery中的鼠标事件:\x0d\x0a(1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发;\x0d\x0a$('p').click(function(){\x0d\x0aalert('click function is running\x0d\x0a!');\x0d\x0a});\x0d\x0a(2):dbclick事件:dbclick事件在用户完成迅速连续的两次点击之后触发,双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用;\x0d\x0a$('p').dbclick(function(){\x0d\x0aalert('dbclick function is running\x0d\x0a!');\x0d\x0a});\x0d\x0a(3):mousedown事件:mousedown事件在用户敲击鼠标键时触发,跟keydown事件不一样,该事件仅在按下鼠标时触发;\x0d\x0a$('p').mousedown(function(){\x0d\x0aalert('mousedown function is\x0d\x0arunning !');\x0d\x0a});\x0d\x0a(4):mouseup事件:mouseup事件在用户松开鼠标时触发,如果在与按下鼠标的元素相同元素上松开,那么click事件也会触发;\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事件于用户把鼠标从一个元素移动到另外一个元素上时触发,如果需要知道来自那个元素可以使用,relatedTagrget属性;\x0d\x0a(6):mouseout事件:mouseout事件于用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上。

jquery鼠标移入移出

mouseenter(进入)、mouseleave、mouseover(覆盖)和mouseout是常用来判断鼠标移出和移入的事件句柄,虽然功能上差不多,但是细节却有不同的地方。

mouseover和mouseout在父元素和其子元素都可以触发,当鼠标穿过一个元素时,触发次数得依子元素数量而言。

mouseenter和mouseleave只在父元素触发,当鼠标穿过一个元素时,只会触发一次。

mouseover和mouseout比mouseenter和mouseleave先触发

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


本文标题:鼠标jquery,鼠标不动了按什么键恢复
转载来于:http://cdkjz.cn/article/phgedh.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220