鼠标mouseover事件

鼠标mouse事件

1 .mouseenter:不冒泡。只有在鼠标穿过备选元素的时候，才会触发mouseenter事件
2 .mouseover:冒泡。不论鼠标指针穿过被选元素或者其子元素，都会触发mouseover事件
3 .为了阻止mouseover,mouseout反复触发，我们需要用到event的relaedtarget，这个属性用来判断mouseover和mouseout事件目标节点的相关节点的属性。分别代表鼠标刚刚离开的那个节点。鼠标移向的那个节点。由于MSIE不支持这个属性，不过有替代的属性。fromElemenet,toElement。通过判断这个属性，我们就可以知道鼠标是从哪个对象移过来，又要移动到哪个对象，然后判断这个相关联的兑现过是否在我们要触发的事件的对象的内容，然后来判断我们是否真的要触发这个事件。
4 .

1 .mouseleave：不冒泡
2 .mouseout:冒泡

mouseover()、mouseout()分别是什么事件

当你给一个有孩子的容器添加mouseOut 、mouseOver 事件后，当鼠标设备移动到这个容器内部区域时内部区域不包括该容器内的孩子区域触发mouseOver 事件，离开该容器触发mouseOut 事件将鼠标设备移动到该容器内孩子区域时或者移出容器都会触发mouseOut 事件。

在jquery中其实mouseover和mouseout两个事件等于hover事件。两个没什么区别，应该是一样的。但昨天一个动画效果才让我见识了，这两个并不能等同。

?《div class=“wrapper“》

《div class=“img“》《/div》

《div class=“text“》《/div》

《/div》

《div class=“point“》《/div》

在wrapper上加事件，当鼠标移动到wrapper上的时候让class=“point“的层放大。但如果用mouseover和mouseout事件的话，当鼠标移动到wrapper层后，point层会变大，但当鼠标在img和text层之间进行移动的时候，point层会变大变小，不停的变化。这并不是我们想要的结果，我们想要的是只要鼠标在wrapper层上，无论是img还是text上，point就变大，但在鼠标未移出wrapper层的情况下，point层不变小。慢慢思路也清晰了，我们不用mouseover和mouseout而用hover问题就解决了。

如何防止鼠标移出移入子元素触发mouseout和mouseover事件

如何防止鼠标移出移入子元素触发mouseout和mouseover事件:
关于mouseout和mouseover事件这里就不多介绍了，具体可以参阅javascript的mouseout和mouseover事件详解一章节。
这两个事件有一个共同特点，那就是当鼠标移入或者移出子元素的时候都会触发对应的事件，这个往往在实际应用中是不需要的，或者说能够带来很大的困扰，下面就通过实例代码介绍一下如何避免此影响。
代码实例如下:
《!DOCTYPE html》
《html》
《head》
《meta charset=“utf-8“》
《meta name=“a

jquery鼠标点击事件是什么

定义和用法：

当点击元素时，会发生 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“);}

MouseOver是什么事件急`

onMouseOver 是鼠标经过的时间。比如说一个按钮，定义了这个事件的话，当鼠标放在这个按牛上，则响应这个事件。经常用于定义CSS属性。
如：《asp:Button ID=“submit“ runat=“server“ Text=“添加“ class=“btn1_mouseout“ onmouseover=“this.className=’btn1_mouseover’“ onmouseout=“this.className=’btn1_mouseout’“ /》

鼠标事件

1.mousewheel鼠标滚轮事件
**获取当前滚轮的值 **

如果值小于 0 滚轮往下滑
如果值大于0 滚轮往上滑

1. onclick 单击事件

2.ondblclick 双击事件
当给同一个格子同时绑定双击和点击事件时
会触发双击事件必定会触发两次单击事件
ondblclick = function (){

3.oncontextmenu 鼠标右键
鼠标右键是一个有默认功能的事件它可以打开右键菜单

4.鼠标释放事件 onmouseup
鼠标按下不会触发松开的时候才会触发

5.鼠标按下事件 onmousedown

1.鼠标移入事件一共有两种
第一种就是obmouseover 和 onmouseout
（1）鼠标移入 onmouseover

（2）鼠标移出 onmouseout

给父级绑定了事件子级没有绑定事件
但是当鼠标移入子级的时候会触发父级的事件
这种情况叫做事件冒泡

第二种鼠标移出事件 onmouseenter 和 onmouseleave

1.鼠标移入 onmouseenter

2.鼠标移出 onmouseleave

鼠标移入移出有两种写法
共同点：就是鼠标移入移出的方法、、
不同的：
第一种 onmouseover 和 onmouseout 会触发事件冒泡
第二种 onmouseenter 和 onmouseleave 不会触发事件冒泡

3.鼠标移动事件 onmousemove
box.onmousemove = function (){
consoloe.log(’鼠标移动事件’)
}

鼠标的坐标在鼠标事件的事件对象中保存
所以我们要获取鼠标坐标一般都是通过事件对象 event 获取

所有的鼠标事件都可以通过事件对象来获取鼠标坐标
但是通常我们都是在鼠标移动事件中获取和使用鼠标坐标

几个mouse事件的特点

1.mouseover() : 如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

注：比如div使用了mouseover 事件,鼠标在进入div到span再出去,会触发3次mouseover 事件;

2.mouseenter() : 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

注：比如div使用了mouseenter 事件,鼠标在进入div到span再出去,会触发1次mouseenter事件;

3.mouseout() : 如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

注：比如div使用了mouseout 事件,鼠标在进入div到span再出去,会触发3次mouseout 事件;

4.mouseleave() : 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

注：比如div使用了mouseleave 事件,鼠标在进入div到span再出去,会触发1次mouseleave 事件;

所以它们的区别就是mouseover和mouseout拥有冒泡属性，将 mouseout() 换成 mouseleave() 即可！

鼠标移动到一个元素上,会触发该元素的一个世界,jquery中表示该事件的方法是

//当鼠标开始移动到按钮上一直到移除会依次出发 mouseover -》mousemove -》mouseout
//如果移动到按钮上面再点击一下在移出按钮范围的话，事件触发顺序为 mouseover-》mousemove-》mousedown(可能会有mousemove)-》mouseup-》click-》mousemove-》mouseout
//mousemove事件是mouse鼠标只要在按钮上面移动，就会触发的事件。所以在上面的过程中，就算是鼠标按下了之后有鼠标的移动也会触发mousemove
Jquery里面
$(“#元素id“).hover(function(){划入时间},function(){划出事件}).

mouseover和mouseenter事件的区别

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave

这样的话，mouseenter子元素不会反复触发事件，否则在IE中经常有闪烁情况发生。

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

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