关于Table的鼠标事件（onMouseOver、onMouseOut）的问题

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

<TABLE border="1" width=200 onmouseover="alert(&#39;鼠标滑进&#39;)" onmouseout="alert(&#39;鼠标滑出&#39;)">
    <TR>
        <TD id="TD1" noWrap height=25 onmouseenter="this.style.color=&#39;red&#39;"> 菜单1</TD>
    </TR>
    <tr>
        <TD id="TD2" noWrap height=25 onmouseenter="this.style.color=&#39;red&#39;"> 菜单2</TD>
    </TR>
    <TR>
        <TD id="TD3" noWrap height=25 onmouseenter="this.style.color=&#39;red&#39;"> 菜单3</TD>
    </TR>
</TABLE>

按常理说：当鼠标进入table的时候就会弹出＂鼠标滑进＂，当鼠标离开table的时候就会弹出＂鼠标滑出＂
但事实情况却是会不停地弹出＂鼠标滑进＂＂鼠标滑出＂，因为鼠标在TD之间滑动时也会触发TABLE的onmouseover和onmouseout事件。

如果是在IE下,则可以换用onmouseenter和onmouseleave来解决，示例代码如下：

<TABLE border="1" width=200 onmouseenter="alert(&#39;鼠标滑进&#39;)" onmouseleave="alert(&#39;鼠标滑出&#39;)">
    <TR>
        <TD id="TD1" noWrap height=25 onmouseenter="this.style.color=&#39;red&#39;"> 菜单1</TD>
    </TR>
    <tr>
        <TD id="TD2" noWrap height=25 onmouseenter="this.style.color=&#39;red&#39;"> 菜单2</TD>
    </TR>
    <TR>
        <TD id="TD3" noWrap height=25 onmouseenter="this.style.color=&#39;red&#39;"> 菜单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 ((oo = 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>

Atas ialah kandungan terperinci 关于Table的鼠标事件（onMouseOver、onMouseOut）的问题. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!