<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function pri_table()
{
var time=new Date();
var tima=new Array();
tima[0]="今天是"+time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"
tima[1]="星期"+time.getDay()
tima[2]="时间"+time.getHours()+"时"+time.getMinutes()+"分"
var tab;
tab="<table>"
for(var i=0;i<3;i++)
{
tab+="<tr>"
for(var j=0;j<1;j++)
{
tab+="<td>"+tima[i]+"</td>"
}
tab=tab+"</tr>"
}
tab=tab+"</table>"
document.getElementById("apDiv1").innerHTML=tab;
}
function clear_1()
{
document.getElementById("apDiv1").innerHTML="";
}
</script>
<style type="text/css">
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:2;
text-align:center;
left: 597px;
top: 42px;
border:#000 2px solid;
}
</style>
</head><body>
<div id="apDiv1" onmouseover="pri_table()" onmouseout="clear_1()"></div>
</body>
</html>
对于层mouseover显示表格,mouseout表格消失。可是当鼠标移到表格位置与层的交集位置,显示表格狂闪怎么解决,为什么?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function pri_table()
{
var time=new Date();
var tima=new Array();
tima[0]="今天是"+time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"
tima[1]="星期"+time.getDay()
tima[2]="时间"+time.getHours()+"时"+time.getMinutes()+"分"
var tab;
tab="<table>"
for(var i=0;i<3;i++)
{
tab+="<tr>"
for(var j=0;j<1;j++)
{
tab+="<td>"+tima[i]+"</td>"
}
tab=tab+"</tr>"
}
tab=tab+"</table>"
document.getElementById("apDiv1").innerHTML=tab;
}
function clear_1()
{
document.getElementById("apDiv1").innerHTML="";
}
</script>
<style type="text/css">
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:2;
text-align:center;
left: 597px;
top: 42px;
border:#000 2px solid;
}
</style>
</head><body>
<div id="apDiv1" onmouseover="pri_table()" onmouseout="clear_1()"></div>
</body>
</html>
对于层mouseover显示表格,mouseout表格消失。可是当鼠标移到表格位置与层的交集位置,显示表格狂闪怎么解决,为什么?
解决方案 »
- 请问怎么实现类似搜狗网址导航里面的 “百度\google的搜索框”?
- 如何验证图片是否加载成功?
- js中遇到的特殊语法(&& || !! 的使用方式),请高手指点
- 网络编辑器图片上传路径问题? 急!!!!
- 让已知id的div上面所有的checkbox 不选中
- 如何将CSS的class动态应用到某个元素上?
- EXT.PagingToolbar分页,新人求解。。。
- ★★★★★★★高手救命★★★★★★★
- 不簡單的問題(搜索不到答案)﹐關于checkbox和radiobox的取值
- 树形菜单问题
- 关于jquery取值问题(分不多了,大哥大姐都过来看看。。。。)
- 请高手写一个Object对象***********************
你可以判断一下鼠标位置再清除表格:
function clear_1(e,div){
e=e||window.event;
var mx=e.pageX||e.x,my=e.pageY||e.y;
var l=div.offsetLeft,w=div.offsetWidth,t=div.offsetTop,h=div.offsetHeight
if (mx<l||mx>(l+w)||my<t||my>(t+h)){
document.getElementById("apDiv1").innerHTML="";
}
}
这是个很巧妙的的方法,因为当onmouseout触发后,实质性的方法并没有马上执行,而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件,那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了,所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。二.contains在onmouseover时先进行如下判断,结果为true时再执行方法体:
var s = e.fromElement || e.relatedTarget ;
if(!this.contains(s)){MouseOverFunc()}在onmouseout时先进行如下判断,结果为true时再执行方法体:
var s = e.toElement || e.relatedTarget ;
if(!this.contains(s)){MouseOutFunc()}
下面来解释一下上面两行代码的含义:在IE中,所有的HTML元素都有一个contains方法,它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发,如果内部元素导致了不需要的事件被触发,那我们就忽略这个事件。event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素;event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。那么上面两行代码的含义就分别是:○ 当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件;○ 当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件;这样,内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。但问题又来了,非IE的浏览器并不支持contains函数,不过既然我们已经知道了contains函数的作用,就可以自行添加如下的代码来为非IE浏览器增加contains支持:if(typeof(HTMLElement) != "undefined"){HTMLElement.prototype.contains = function(obj){ while(obj != null && typeof(obj.tagName) != "undefined") {if(obj == this)return true;obj = obj.parentNode;} return false; }; }