jquery鼠标移入移出
mouseenter(进入)、mouseleave、mouseover(覆盖)和mouseout是常用来判断鼠标移出和移入的事件句柄，虽然功能上差不多，但是细节却有不同的地方。
-
mouseover和mouseout在父元素和其子元素都可以触发，当鼠标穿过一个元素时，触发次数得依子元素数量而言。
-
mouseenter和mouseleave只在父元素触发，当鼠标穿过一个元素时，只会触发一次。
-
mouseover和mouseout比mouseenter和mouseleave先触发
因此一般mouseover和mouseout一起使用，mouseenter和mouseleave一起使用
jQuery的mouseleave事件和mouseout事件的区别
$(“li“).each(function(i) {
//删除的鼠标划过的显示与隐藏
$(this).mouseover(function() {
$(this).find(“.del“).fadeIn(10);
})
$(this).mouseleave(function() {
$(this).find(“.del“).fadeOut(10);
})
})
上面的代码中如果不是用的mouseleave而是mouseout的话你会发现尚未离开类名的.del这个DIV这个DIV有时候就会闪动。那是因为你可能离开了该DIV的子元素，所以会出发mouseout事件。具体mouseleave和mouseout两者之间的区别主要有以下两点：
1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
JavaScript中mouseout函数一般位置
与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
解决两者的区别，看下面引用的例子：
当为某个容器绑定了 onmouseover 或者onmouseout 事件时，如果这个容器中有其它元素节点，那么鼠标在内部移动时会频繁触发 onmouseover和onmouseout 事件。
而我想要的效果是：事件仅在鼠标进入/离开元素区域触发一次，当鼠标在元素区域内部移动的时候不会触发。
为什么会出现这个原因呢？其实是因为事件冒泡导致的。当鼠标移上或者移出容器中的子节点时，会分别触发mouseover和mouseout事件，紧随着dom树向上冒泡传递，直到被事件处理程序（监听器）捕获捕获或者冒泡到根节点（document或者window），也就是说事件会向它的父级对象派发。
知道了问题产生原因，那么解决起来是不是也很简单呢？最初我想的是取消事件冒泡，使用event.cancelBubble = true（IE）和e.stopPropagation()（其它浏览器），但是简单测试后发现貌似没有什么效果，问题依旧，貌似冒泡停止不了，原因不明。（补充：我是测试将容器中的a链接节点取消冒泡，但是发现鼠标移上移下还会触发事件。a节点下还有span节点。难道要将容器中所有节点都取消冒泡才行？有心人可以测试，如果真的这样，那也太恶心了，要是N多的节点，难道都要停止冒泡下？）
其实在IE下鼠标事件有个 mouseEnter 和 mouseLeave，这个就是移进和移处容器时触发一次，在内部移动则不会触发，遗憾的是只有IE支持。我们现在要做的就是“为非IE浏览器添加mouseEnter和mouseLeave支持”。
我翻阅了百度最新开源的JS库tangram，看了里面的处理，发现貌似是单独处理了非IE浏览器下的事件，使用一个叫“baidu.event._eventFilter._crossElementBoundary(listener, e)”的方法修正mouseover和mouseout，然后封装了个mouseEnter和mouseLeave事件。
baidu.event._eventFilter._crossElementBoundary = function(listener, e){
var related = e.relatedTarget,
current = e.currentTarget; if(typeof related == ’undefined’){ return listener.call(current, e);
} // 如果current和related都是body，contains函数会返回false
// Firefox有时会把XUL元素作为relatedTarget
// 这些元素不能访问parentNode属性
// thanks jquery & mootools
//如果current包含related，说明没有经过current的边界
//注：baidu.dom.contains是个定义的检测节点是否包含的函数，下面我会讲到
if(related === false || current == related || related.prefix == ’xul’ || baidu.dom.contains(current, related)){ return ;
} //调用执行
return listener.call(current, e);
};123456789101112131415161718
百度的方法我并不喜欢，首先它只对非IE浏览器进行了处理，当然，它又进行了封装，可以直接使用mouseEnter和mouseLeave；但是，我们做普通开发，没必要这么封装，我只是想要简单的去掉mouseover和mouseout的这个恼人特性。
而jQuery则不是这么做的，它是直接对IE和其它所有浏览器下的mouseover和mouseout事件进行了修正。参考jQuery，我得到了我目前所有的代码。
首先，介绍个判断节点对象是否包含的函数contains.
function contains(p,c){
return p.contains ?
p != c && p.contains(c) : !!(p.compareDocumentPosition(c) & 16);
}1234
然后就是重点的了，这里我们在IE下用到了fromElement和toElement，这两个是IE下的鼠标移上去时和移出时的节点对象。
function fixedMouse(e,target){
var related, type=e.type.toLowerCase();//这里获取事件名字
if(type==’mouseover’){
related=e.relatedTarget||e.fromElement
}else if(type=’mouseout’){
related=e.relatedTarget||e.toElement
}else return true; return related && related.prefix!=’xul’ && !contains(target,related) && related!==target;
}12345678910
然后我们怎么用呢？比如在绑定事件时，
//addListener为封装的事件绑定函数addListener(target,’mouseover’,function(e){
e=e||window.event; if(fixedMouse(e, target)){ //do something
}
},false);1234567
这样就会只在移入移出target节点时触发mouseover和mouseout了。
当然，你也可以将上面的代码单独封装成mouseEnter和mouseLeave，这样可以以后调用时更好区别mouseover和mouseout。
关于js里的mouseout事件！
这是IE的一个BUG，jquery专门写了一个叫做hover的事件，你用jquery的hover事件去代替mouseout就可以解决这个问题了！
mouseover和mouseenter事件的区别
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave
这样的话，mouseenter子元素不会反复触发事件，否则在IE中经常有闪烁情况发生。
为什么把鼠标移到div里的超链接上，就触发了这个div的mouseout事件呢
$(function(){
$(“#1“).mouseover(function(){
$(“#2“).css(“background“,“green“)
})
$(“#1“).mouseout(function(){
$(“#2“).css(“background“,“blue“)
})
})
最搞不懂的是你用hover干嘛 hover就能够替代mouseover和mouseout了 他是两个的集合体
鼠标mouse事件
1 .mouseenter:不冒泡。只有在鼠标穿过备选元素的时候，才会触发mouseenter事件
2 .mouseover:冒泡。不论鼠标指针穿过被选元素或者其子元素，都会触发mouseover事件
3 .为了阻止mouseover,mouseout反复触发，我们需要用到event的relaedtarget，这个属性用来判断mouseover和mouseout事件目标节点的相关节点的属性。分别代表鼠标刚刚离开的那个节点。鼠标移向的那个节点。由于MSIE不支持这个属性，不过有替代的属性。fromElemenet,toElement。通过判断这个属性，我们就可以知道鼠标是从哪个对象移过来，又要移动到哪个对象，然后判断这个相关联的兑现过是否在我们要触发的事件的对象的内容，然后来判断我们是否真的要触发这个事件。
4 .
1 .mouseleave：不冒泡
2 .mouseout:冒泡
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“);}
几个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事件于用户把鼠标从一个元素移动到另外一个元素上时触发，mouseout事件于用户把鼠标移出一个元素时触发。
下面为你详细介绍下jquery中的鼠标事件：
(1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发；
$(’p’).click(function(){
alert(’click function is running
!’);
});
(2):dbclick事件：dbclick事件在用户完成迅速连续的两次点击之后触发，双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用；
$(’p’).dbclick(function(){
alert(’dbclick function is running
!’);
});
(3):mousedown事件：mousedown事件在用户敲击鼠标键时触发，跟keydown事件不一样，该事件仅在按下鼠标时触发；
$(’p’).mousedown(function(){
alert(’mousedown function is
running !’);
});
(4):mouseup事件：mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发；
$(’p’).mouseup(function(){
alert(’mouseup function is running
!’);
}).click(function(){
alert(’click
function is running too !’);
});
(5):mouseover事件：mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性；
(6):mouseout事件：mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。