当前位置: 代码迷 >> JavaScript >> 啊一个接近崩溃的Table的onMouseOver和onMouseOut的有关问题
  详细解决方案

啊一个接近崩溃的Table的onMouseOver和onMouseOut的有关问题

热度:131   发布时间:2012-03-18 13:55:39.0
啊啊啊啊一个接近崩溃的Table的onMouseOver和onMouseOut的问题
近来比较常用鼠标事件,但是我发现一个问题(看似很简单),但是我总是弄不明白
<table   width= "350 "   border= "0 "   cellspacing= "0 "   cellpadding= "0 "   onMouseOver= "alert( 'over_table ') "   onMouseOut= "alert( 'out_table ') ">
    <tr>
        <td   bgcolor= "#996633 "> &nbsp; </td>
        <td   bgcolor= "#234633 "> <button   >     Clos </button> </td>
        <td   bgcolor= "#0000FF "> &nbsp; </td>
    </tr>
</table>
按常理是
当鼠标进入table的时候就会弹出over_table
当鼠标离开table的时候就会弹出out_table
但是奇怪的是我的鼠标从左边的td移到中间的td的时候,竟然会弹出out_table,从中间的td移动到右边的td也竟然会弹出out_table...(事实上鼠标并没有离开这个table)
甚至从中间的button移动到包含它的td上也触发了这个事件,很烦啊
究竟是什么问题啊
我想实现的是

鼠标在table范围内移动什么都不做(就是鼠标在里面的td之间移动不触发任何事件)

------解决方案--------------------
<table width= "350 " border= "0 " cellspacing= "0 " cellpadding= "0 " onMouseOver= "document.getElementById( 'm ').innerText=11111111 " onMouseOut= "document.getElementById( 'm ').innerText=222222222 ">
<tr>
<td bgcolor= "#996633 "> &nbsp; </td>
<td bgcolor= "#234633 "> <button > Clos </button> </td>
<td bgcolor= "#0000FF "> &nbsp; </td>
</tr>
</table>
<div id= "m "> </div>


没问题呀,你用alert 你点确忍的时候已经移出table了
------解决方案--------------------
事件应该是被加到自己本身外,还包括该对象所有子对象中的,所以,你一旦换了对象,如上面你说的换了个td,也会触发。
------解决方案--------------------
嗯嗯,同意楼上~~~
因为table本来就是个虚无的对象~~主要是组织子对象~~~
------解决方案--------------------
没办法了,
我在IE与FireFox中都测试了一样,情况一样,
尽量不要嵌套对象吧.
------解决方案--------------------
table里加上 onmousemove=null 看看
------解决方案--------------------
<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 "> &nbsp; </td>
<td bgcolor= "#234633 "> <button > Clos </button> </td>
<td bgcolor= "#0000FF "> &nbsp; </td>
</tr>
</table>
<script type= "text/javascript ">
var rePosition = function (o) {
//获取元素绝对位置
var $x = $y = 0;
do {
$x += o.offsetLeft;
$y += o.offsetTop;
} while ((o = 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 () {
  相关解决方案