테이블의 마우스 이벤트(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>

위 내용은 테이블의 마우스 이벤트(onMouseOver, onMouseOut)에 대한 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!