看下面这段代码:
我们需要给某个TABLE加上鼠标事件的时候,一般希望当鼠标滑在整个TABLE之上的时候做某些处理,当鼠标滑出TABLE的时候做另外的处理. 一般情况下你会用onmouseover和onmouseout,代码如下:
<TABLE border="1" width=200 onmouseover="alert('鼠标滑进')" onmouseout="alert('鼠标滑出')">
<TR>
<TD id="TD1" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单1</TD>
</TR>
<tr>
<TD id="TD2" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单2</TD>
</TR>
<TR>
<TD id="TD3" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单3</TD>
</TR>
</TABLE>
按常理说:当鼠标进入table的时候就会弹出"鼠标滑进",当鼠标离开table的时候就会弹出"鼠标滑出"
但事实情况却是会不停地弹出"鼠标滑进""鼠标滑出",因为鼠标在TD之间滑动时也会触发TABLE的onmouseover和onmouseout事件。
如果是在IE下,则可以换用onmouseenter和onmouseleave来解决,示例代码如下:
<TABLE border="1" width=200 onmouseenter="alert('鼠标滑进')" onmouseleave="alert('鼠标滑出')">
<TR>
<TD id="TD1" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单1</TD>
</TR>
<tr>
<TD id="TD2" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单2</TD>
</TR>
<TR>
<TD id="TD3" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单3</TD>
</TR>
</TABLE>
如果是其他浏览器,则需要判断鼠标指针的坐标是否处于TABLE之外.示例代码如下(网上搜集):
<style type="text/css">...
html, body {...}{
padding:0px;
margin:0px;
}
</style><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<table id="ta" width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#996633"> </td>
<td bgcolor="#234633"><button > Clos</button></td>
<td bgcolor="#0000FF"> </td>
</tr>
</table>
<script type="text/javascript">...
var rePosition = function (o) ...{
//获取元素绝对位置
var $x = $y = 0;
do ...{
$x += o.offsetLeft;
$y += o.offsetTop;
} while ((o = o.offsetParent) && o.tagName != "BODY");
return ...{ x : $x, y : $y };
};
window.onload = function () ...{
var wc = document.getElementById("ta"), ing = false;
wc.onmouseover = function () ...{
if (!ing) ...{
ing = true;
alert("over");
}
};
wc.onmouseout = function () ...{
var wc = this, e = window.event || e,
x = document.body.scrollLeft + e.clientX, y = document.body.scrollTop + e.clientY, p = rePosition(wc);
//alert(y);
if (x <= p.x || x >= (p.x + wc.offsetWidth) || y <= p.y || y >= (p.y + wc.offsetHeight)) ...{
alert("out");
ing = false;
}
};
};
</script>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/fishsoul/archive/2007/09/26/1801898.aspx
分享到:
相关推荐
最近两天在温习onmouseover事件和onmouseout事件,其实里面有很多深奥的知识,接下来小编给大家带来了onmouseover事件和onmouseout事件全面了解,感兴趣的朋友一起看下
鼠标移上去显示别的东西,离开恢复原样;通过传递参数实现此功能
页面显示所有图片,当鼠标移到图片上显示该图片详细信息并且加样式
兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
c# 在webFrom上实现tabcontrol功能,可以实现tabcontrol中的所有功能,包括onmouseover事件和onclick事件,程序附有注释容易理解。
一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout...接着鼠标移动到’B'(路径’2′),此时’A’会触发onmouseout(先)和onmouseover(后)事件。 由此可见,如果HTML元素(‘A’层)内还有其他元
event:[removed]onmouseover = function(){this.style.backgroundColor=’#E3FFC9′},onmouseout = function(){this.style.backgroundColor=’#FFFFFF’}); } #b_g_date tr:hover{ background:#E3FFC9
Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了 onMouseUp HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标按下后,松开时激发的事件 ...
一直想实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上,今晚终于有时间实现它。此功能就是当鼠标经过时RadioButtonList或CheckBoxList每一个Item时,让Item有特效显示,离开时,恢复原样。...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
c# 在webFrom上实现tabcontrol功能 onmouseover事件:鼠标移动到按钮上page页面更换 onclick事件:点击按钮页面更换
使用onmouseover和onmouseout事件实现不同的效果而且是使用js动态实现,本文有利于巩固你js与css方面的知识,感兴趣的你可以了解下哦,希望本文对你有所帮助
onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按...
个人整理的html所有的鼠标事件及方法:onblur 、onclick 、ondblclick 、onfocus 、onkeydown 、onkeypress 、onkeydown 、onKeyUp 、onmousedown 、onmousemove 、onmouseout 、onmouseover 、onmouseup ...
onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4、N4 鼠标移动时触发此事件 onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件 onkeypress IE4、N4 当键盘上的某个键被按下...
下面都是一些上面的事件触发的事先定义的代码。