读书人

啊一个接近崩溃的Table的onMouseOver和

发布时间: 2012-03-18 13:55:39 作者: rapoo

啊啊啊啊一个接近崩溃的Table的onMouseOver和onMouseOut的问题
近来比较常用鼠标事件,但是我发现一个问题(看似很简单),但是我总是弄不明白
<table width= "350 " border= "0 " cellspacing= "0 " cellpadding= "0 " onMouseOver= "alert( 'over_table ') " onMouseOut= "alert( 'out_table ') ">
<tr>
<td bgcolor= "#996633 ">   </td>
<td bgcolor= "#234633 "> <button > Clos </button> </td>
<td bgcolor= "#0000FF ">   </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 ">   </td>
<td bgcolor= "#234633 "> <button > Clos </button> </td>
<td bgcolor= "#0000FF ">   </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 ">   </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 ((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 () {


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>
[解决办法]
要想不触发时间估计是不做不到的,只能自己在js里进行些判断,然后去执行语句。
[解决办法]
如果是ie,就用onmouseenter/onmouseleave/
如果考虑其它的浏览器,用mouseout时要判断是否 this.contains(event.toElement||event.relateTarget)
注:contains方法只有ie里有实现.

有关onmouseover和onmouseout:
http://jkisjk.spaces.live.com/blog/cns!758CACE25E89DD3B!397.entry
[解决办法]
不行就setCapture(false)一下 强制限制内部元素的事件触发

读书人网 >JavaScript

热点推荐