Questions sur les événements de souris de Table (onMouseOver, onMouseOut)

Lorsque nous devons ajouter des événements de souris à une certaine TABLE, nous souhaitons généralement effectuer un traitement lorsque la souris glisse sur l'ensemble de la TABLE, et effectuer un autre traitement lorsque la souris glisse hors de la TABLE. Normalement vous utiliserez onmouseover et onmouseout, le code est le suivant :

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

Selon le bon sens : lorsque la souris entre dans le tableau, "mouse slide in" apparaîtra, et lorsque le la souris quitte la table "Mouse slide out" apparaîtra
Mais en fait, "mouse slide in" et "mouse slide out" apparaîtront constamment, car les événements onmouseover et onmouseout de TABLE seront également déclenchés lorsque la souris glisse entre les TD.

S'il s'agit d'IE, vous pouvez utiliser onmouseenter et onmouseleave pour résoudre le problème. L'exemple de code est le suivant :

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

S'il s'agit d'autres navigateurs, vous devez déterminer s'il s'agit d'un autre navigateur. les coordonnées du pointeur de la souris sont en Outside TABLE. L'exemple de code est le suivant (collecté en ligne) :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!