Questions about Table's mouse events (onMouseOver, onMouseOut)

When we need to add mouse events to a certain TABLE, we generally want to do some processing when the mouse slides over the entire TABLE, and do other processing when the mouse slides out of the TABLE. Under normal circumstances, you will use onmouseover and onmouseout. The code is as follows:

<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>

According to common sense: when the mouse enters the table, "mouse slide in" will pop up, and when the mouse leaves the table, it will pop up. "Mouse slide out" pops up
But the fact is that "mouse slide in" and "mouse slide out" pop up constantly, because the onmouseover and onmouseout events of TABLE are also triggered when the mouse slides between TDs.

If it is under IE, you can use onmouseenter and onmouseleave to solve the problem. The sample code is as follows:

<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>

If it is other browsers, you need to determine whether the coordinates of the mouse pointer are within TABLE. outside. The sample code is as follows (collected online):

<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>

The above is the detailed content of Questions about Table's mouse events (onMouseOver, onMouseOut). For more information, please follow other related articles on the PHP Chinese website!