关于mouseout和mouseleave之间的区别
在前端开发中,经常需要用到onMouseOut,onMouseLeave和onMouseOver,用于当鼠标移出一个层的时候,那个层隐藏,而onMouseLeave和onMouseOver仅有Ie支持,其它浏览器都不支持,而且onMouseOut会不断冒泡,也就是说当子元素离开的时候,也会触发本元素的onMouseOut事件
以下是它们几个之间的区别:
不论鼠标指针离开被选元素还是任何被选元素的子元素,都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
兼容多种浏览器的解决办法:
使用onMouseOut事件,调用
var absXY = function(pobj)
{
var sTop=pobj.offsetTop;
var sLeft=pobj.offsetLeft;
while (pobj = pobj.offsetParent) {
sTop += pobj.offsetTop;
sLeft+=pobj.offsetLeft;
}
return {
x: sLeft,
y: sTop
};
};
var mousePosition = function(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.documentElement.scrollLeft,
y:ev.clientY + document.documentElement.scrollTop
};
};
function domouseout(e,el){
var m = mousePosition(e);
var x = m.x,
y = m.y;
var w = el.offsetWidth,
h = el.offsetHeight;
var pos = absXY(el);
if(x>= (pos.x+w) || y>=(pos.y+h)
|| x<= pos.x || y <= pos.y
){
hidden();
}
如果您觉得本文的内容对您的学习有所帮助:
关键字:
关于mouseout和mouseleave之间的区别