Table的onMouseOver和onMouseOut鼠标事件的问题

原创 2007年09月26日 17:16:00

看下面这段代码:

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

<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的onmouseoveronmouseout事件。

如果是在IE下,则可以换用onmouseenteronmouseleave来解决,示例代码如下:

<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">&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 () {
var wc = this, e = window.event || e,
= 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>

鼠标移入移出事件

DOCTYPE html> html> head> meta charset="UTF-8"> title>鼠标移入移出事件title> style type="text/css"> ...
  • jiaqingge
  • jiaqingge
  • 2016年10月18日 13:21
  • 464

鼠标的移入移出事件

一 介绍 鼠标的移入和移出事件分别是onmouseover和onmousemove事件。 其中,onmouseover事件在鼠标移动到对象上方时触发事件处理程序,onmousemove事件在鼠标移...
  • chengqiuming
  • chengqiuming
  • 2017年04月12日 10:37
  • 1867

简单的鼠标移出移入样式改变

简单的鼠标移出移入样式改变
  • z__lin
  • z__lin
  • 2017年09月06日 21:08
  • 266

鼠标响应事件 当鼠标经过/移出时切换css

gulu77 .Off{ background-color: #00FF66; padding:100px;} .up{background-color: #FF0000; padding...
  • u012432077
  • u012432077
  • 2014年10月30日 21:58
  • 1759

鼠标移入事件 动态元素 事件委托 鼠标移入移出 弹出对话框事件

// 因为div是动态生成的 所以要用事件委托   function showRectification(num){     $(document).on("mouseover","#suggesti...
  • RobertTony_Java
  • RobertTony_Java
  • 2017年07月25日 15:53
  • 407

获取table的行,响应onclick事件

$("#table tr").click{function(){ }}
  • kungfu_panda
  • kungfu_panda
  • 2014年08月25日 11:40
  • 5218

用javascript 当mouseover 悬停在一个td里的内容时显示一段文字

我用title 和div 两种方法做的, 文字出现的位置根据鼠标的位置动态确定: 文字内容1 文字内容2 function overShow() { v...
  • lotusyangjun
  • lotusyangjun
  • 2015年06月05日 15:15
  • 17572

onmouseover和onmouseout的烦恼

一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout。   很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在...
  • cui55
  • cui55
  • 2015年06月02日 17:28
  • 694

利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效

在我们使前后台分开的同时,有时我们想也用CSS来实现只有在JS里才能实现的动作,看似不可能的事情,但经过我的努力,但很好的工作了.       我们知道 CSS 的Exprssion 在IE窗体需...
  • phphot
  • phphot
  • 2007年09月27日 09:07
  • 939

浅谈前端中的onmouseover 事件

修改别人的模板遇到一个问题,分类图的切换默认是五个,我想增加四个,一直没有增加成功。它使用的onmouseover 事件。 去查了一下: 定义和用法 onmouseover 事件...
  • weixin_36171533
  • weixin_36171533
  • 2017年04月02日 19:58
  • 783
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Table的onMouseOver和onMouseOut鼠标事件的问题
举报原因:
原因补充:

(最多只允许输入30个字)