关于Table的鼠标事件（onMouseOver、onMouseOut）的问题

来源：懂视网责编：小采时间：2020-11-27 20:15:57

关于Table的鼠标事件（onMouseOver、onMouseOut）的问题

关于Table的鼠标事件（onMouseOver、onMouseOut）的问题:我们需要给某个TABLE加上鼠标事件的时候，一般希望当鼠标滑在整个TABLE之上的时候做某些处理,当鼠标滑出TABLE的时候做另外的处理．一般情况下你会用onmouseover和onmouseout，代码如下： <TABLE border="1" width=20

推荐度：

点击下载本文 文档为doc格式

导读关于Table的鼠标事件（onMouseOver、onMouseOut）的问题:我们需要给某个TABLE加上鼠标事件的时候，一般希望当鼠标滑在整个TABLE之上的时候做某些处理,当鼠标滑出TABLE的时候做另外的处理．一般情况下你会用onmouseover和onmouseout，代码如下： <TABLE border="1" width=20

我们需要给某个TABLE加上鼠标事件的时候，一般希望当鼠标滑在整个TABLE之上的时候做某些处理,当鼠标滑出TABLE的时候做另外的处理．　一般情况下你会用onmouseover和onmouseout，代码如下：

<TABLE border="1" width=200 onmouseover="alert('鼠标滑进')" onmouseout="alert('鼠标滑出')"> 
 <TR> 
 <TD id="TD1" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单1</TD> 
 </TR> 
 <tr> 
 <TD id="TD2" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单2</TD> 
 </TR> 
 <TR> 
 <TD id="TD3" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单3</TD> 
 </TR> 
</TABLE>

按常理说：当鼠标进入table的时候就会弹出＂鼠标滑进＂，当鼠标离开table的时候就会弹出＂鼠标滑出＂
但事实情况却是会不停地弹出＂鼠标滑进＂＂鼠标滑出＂，因为鼠标在TD之间滑动时也会触发TABLE的onmouseover和onmouseout事件。

如果是在IE下,则可以换用onmouseenter和onmouseleave来解决，示例代码如下：

<TABLE border="1" width=200 onmouseenter="alert('鼠标滑进')" onmouseleave="alert('鼠标滑出')"> 
 <TR> 
 <TD id="TD1" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单1</TD> 
 </TR> 
 <tr> 
 <TD id="TD2" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单2</TD> 
 </TR> 
 <TR> 
 <TD id="TD3" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单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）的问题

推荐度：

点击下载本文 文档为doc格式

标签：鼠标问题的鼠标

热门焦点

关于Table的鼠标事件（onMouseOver、onMouseOut）的问题

关于Table的鼠标事件（onMouseOver、onMouseOut）的问题

关于Table的鼠标事件（onMouseOver、onMouseOut）的问题

最新推荐

猜你喜欢

热门推荐