Table的onMouseOver和onMouseOut鼠标事件的问题

原创 2007年09月26日 17:16:00

看下面这段代码:

我们需要给某个TABLE加上鼠标事件的时候,一般希望当鼠标滑在整个TABLE之上的时候做某些处理,当鼠标滑出TABLE的时候做另外的处理. 一般情况下你会用onmouseoveronmouseout,代码如下:

<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的onmouseoveronmouseout事件。

如果是在IE下,则可以换用onmouseenteronmouseleave来解决,示例代码如下:

<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">&nbsp;</td>
    
<td bgcolor="#234633"><button >  Clos</button></td>
    
<td bgcolor="#0000FF">&nbsp;</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,
= 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>

相关文章推荐

table去除鼠标悬停hover效果

网上有很多“table如何增加鼠标悬停效果”的这种帖子,无非就是加hover。但是我现在遇到了一个问题,我在项目中创建了干干净净的一个table,发现它居然是有鼠标悬停效果的,我猜估计是有一个全局的t...

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数。 1.   最基本的算法是,从小到大遍历: for (i = 2 to A -1)          if (i * B > A)...

利用K-means聚类算法根据经纬度坐标对中国省市进行聚类

K-means聚类算法是一种非层次聚类算法,在最小误差的基础上将数据划分了特定的类,类间利用距离作为相似度指标,两个向量之间的距离越小,其相似度就越高。程序读取全国省市经纬度坐标,然后根据经纬度坐标进...

Radon变换理论介绍与matlab实现--经验交流

本人最近在研究Radon变换,在查阅了各种资料之后在此写下个人的理解,希望与各位牛牛进行交流共同进步,也使得理解更加深刻些。 Radon变换的本质是将原来的函数做了一个空间转换,即,将原来的XY平...

CT图像重建技术

由于csdn贴图不方便,并且不能上传附件,我把原文上传到了资源空间CT图像重建技术 1.引言 计算机层析成像(Computed Tomography,CT)是通过对物体进行不同角度的射线投影测量而...

Matlab绘图-很详细,很全面

Matlab绘图强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到所需图形,这类函数称为高层绘图函数。此外,Ma...

linux查找目录下的所有文件中是否含有某个字符串

查找目录下的所有文件中是否含有某个字符串  find .|xargs grep -ri "IBM"  查找目录下的所有文件中是否含有某个字符串,并且只打印出文件名  find .|xargs g...

Radon变换入门matlab CT原理

http://hi.baidu.com/hi9394/blog/item/0d492b8bfd714700c8fc7aa9.html 简介 图像投影,就是说将图像在某一方向上做线性积分(或理解为累...

Excel2016右键新建工作表,打开时提示“因为文件格式或文件扩展名无效。请确定文件未损坏,并且文件扩展名与文件的格式匹配。”的解决办法

上午新建excel工作表时,发现新建完之后居然打不开 提示: 尼玛这坑爹的,难道我的Excel坏了?? 排查问题之后发现 只有新建“Microsoft Excel 工作表”时...

js弹出框、对话框、提示框、弹窗总结

js弹出框、对话框、提示框、弹窗总结 一、JS的三种最常见的对话框 [javascript] view plaincopy //=...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Table的onMouseOver和onMouseOut鼠标事件的问题
举报原因:
原因补充:

(最多只允许输入30个字)