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>

常識によれば、マウスがテーブルに入ると「Mouse Slide In」がポップアップし、マウスがテーブルから離れると、 「マウス スライド アウト」がポップアップします
しかし実際には、マウスが 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>

以上がTable のマウス イベント (onMouseOver、onMouseOut) に関する質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。