Fragen zu den Mausereignissen von Table (onMouseOver, onMouseOut)

Wenn wir Mausereignisse zu einer bestimmten TABELLE hinzufügen müssen, möchten wir im Allgemeinen eine gewisse Verarbeitung durchführen, wenn die Maus über die gesamte TABELLE gleitet, und eine andere Verarbeitung, wenn die Maus aus der TABELLE gleitet. Normalerweise verwenden Sie onmouseover und onmouseout. Der Code lautet wie folgt:

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

Laut gesundem Menschenverstand gilt: Wenn die Maus in die Tabelle eindringt, wird „Mouse Slide In“ angezeigt, und wenn die Wenn die Maus die Tabelle verlässt, wird „Maus herausrutschen“ angezeigt
Tatsächlich werden jedoch ständig „Maus hineinrutschen“ und „Maus herausrutschen“ angezeigt, da die Ereignisse onmouseover und onmouseout von TABLE auch ausgelöst werden, wenn die Maus gedrückt wird gleitet zwischen TDs.

Wenn es sich um einen IE handelt, können Sie das Problem mit onmouseenter und onmouseleave lösen. Der Beispielcode lautet wie folgt:

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

Wenn es sich um andere Browser handelt, müssen Sie feststellen, ob Die Koordinaten des Mauszeigers befinden sich in Outside TABLE. Der Beispielcode lautet wie folgt (online gesammelt):

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

Das obige ist der detaillierte Inhalt vonFragen zu den Mausereignissen von Table (onMouseOver, onMouseOut). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!