高分求助：懂javascript的高手请进！

<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无... <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.popDIV { position:absolute; left:10px; top:35px; width:278px; height:248px; z-index:1; background: #FFF4EE; padding-left:20px; line-height:30px; border: 1px solid #FF6600; }
a { display:block; float: left; padding: 0px 3px 2px 3px; margin-right: 5px; border-right: 1px solid #CCCCCC; text-decoration:none; z-index:2 }
</style>
<script language="javascript">
var shade = document.createElement("div");
function showShade(a,b,t)//a是弹出层的css名,b是弹出div的ID,t是弹出DIV的内容标识
{
shade.id=b;
shade.className=a;
shade.attachEvent && shade.attachEvent("onmouseout", deleteShade) || shade.addEventListener && shade.addEventListener('onmouseout',deleteShade, false);
shade.attachEvent && shade.attachEvent("onmouseover", get) || shade.addEventListener && shade.addEventListener('onmouseover',get, false);
if(t=='c1')
{
content="<a href='http://www.baidu.com'>百度1</a><br /><a href='#'>测试1</a><br /><a href='#'>测试1</a><br /><a href='#' onclick='deleteShade()'>关闭1</a><br />" ;
}
else if(t=="c2")
{
content='<a href="http://www.baidu.com">百度2</a><br /><a href="#">测试2</a><br /><a href="#">测试2</a><br /><a href="#" onclick="deleteShade()">关闭2</a><br />' ;
}
else if(t=="c3")
{
content='通过ajax获取服务器内容<a href="#" onclick="deleteShade()">关闭</a>';
}
else
{
alert("内容未定义");
}
shade.innerHTML=content;
document.body.appendChild(shade);
}
function get()
{
}
function deleteShade()
{
document.body.removeChild(shade);
}
</script>
</head>
<body>
<a href="#" onmouseover="showShade('popDIV','sh','c3')">a</a>
<a href="#" onmouseover="showShade('popDIV','sh1','c1')">b</a>
<a href="#" onmouseover="showShade('popDIV','sh2','c2')">c(ch)</a>
<br />
<h4 style="clear:both" align="center">说明：我想做一个类似于淘宝的产品字母分类菜单，可是</h4>
<br />
<h1 align="center">为什么鼠标不能放在弹出div层的超链接上</h1>
<br />
<h4 align="center">只要鼠标一放在超链接上面，DIV就消失，onmouseover就根本不管用啊！</h4>
</body>
</html>
把代码直接复制到网页里也许会出现乱码，把<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 一行删除就OK了展开

 我来答

2个回答

#热议# 生活中有哪些实用的心理学知识？

gainover
2008-09-06 · TA获得超过1690个赞

知道小有建树答主

回答量：543

采纳率：0%

帮助的人：823万

我也去答题访问个人页

关注

展开全部

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>无标题文档</title>
<style>
.popDIV { position:absolute; z-index:1; background: #FFF4EE; padding-left:20px; line-height:30px; border: 1px solid #FF6600; }
a { display:block; float: left; padding: 0px 3px 2px 3px; margin-right: 5px; border-right: 1px solid #CCCCCC; text-decoration:none; z-index:2 }
</style>
<script language="javascript">
var shade = document.createElement("div");
function showShade(a,b,t)//a是弹出层的css名,b是弹出div的ID,t是弹出DIV的内容标识
{

deleteShade();
var $=document.getElementById;
var p=parseInt;
shade.id=b;
shade.className=a;
shade.position="absolute";
shade.style.left=10;shade.style.top=35;shade.style.width=278;shade.style.height=248;
if(t=='c1')
{
content="<a href='http://www.baidu.com'>百度1</a><br /><a href='#'>测试1</a><br /><a href='#'>测试1</a><br /><a href='#' onclick='deleteShade()'>关闭1</a><br />" ;
}
else if(t=="c2")
{
content='<a href="http://www.baidu.com">百度2</a><br /><a href="#">测试2</a><br /><a href="#">测试2</a><br /><a href="#" onclick="deleteShade()">关闭2</a><br />' ;
}
else if(t=="c3")
{
content='通过ajax获取服务器内容<a href="#" onclick="deleteShade()">关闭</a>';
}
else
{
alert("内容未定义");
}
shade.innerHTML=content;
document.body.appendChild(shade);
function deleteShadeInline()
{
try{
var left=p($(b).style.left);
var right=p($(b).style.left)+p($(b).style.width);
var top=p($(b).style.top);
var bottom=p($(b).style.top)+p($(b).style.height);
if(event.x<left||event.x>right||event.y<top||event.y>bottom){
document.body.removeChild(shade);
}
}
catch(e){}
}
shade.attachEvent && shade.attachEvent("onmouseout", deleteShadeInline) || shade.addEventListener && shade.addEventListener('mouseout',deleteShadeInline, false);
shade.attachEvent && shade.attachEvent("onmouseover", get) || shade.addEventListener && shade.addEventListener('mouseover',get, false);
}

function get()
{
}
function deleteShade(){
try{document.body.removeChild(shade);}catch(e){}
}
</script>
</head>
<body>
<a href="#" onmouseover="showShade('popDIV','sh1','c3')">a</a>
<a href="#" onmouseover="showShade('popDIV','sh2','c1')">b</a>
<a href="#" onmouseover="showShade('popDIV','sh3','c2')">c(ch)</a>
<br />
<h4 style="clear:both" align="center">说明：我想做一个类似于淘宝的产品字母分类菜单，可是</h4>
<br />
<h1 align="center">为什么鼠标不能放在弹出div层的超链接上</h1>
<br />
<h4 align="center">只要鼠标一放在超链接上面，DIV就消失，onmouseover就根本不管用啊！</h4>
</body>
</html>

勉强可以用啦。。 - - 反正思想就是判断鼠标事件的边界。。

你自己再修改吧。。代码中还是有些错误，我给 try{} 了。你自己调试下。

event.x 是 IE 的。你多浏览器的话，自己兼容吧。。

已赞过 已踩过<

评论收起

百度网友69d3694
2008-09-06

知道答主

回答量：6

采纳率：0%

帮助的人：0

我也去答题访问个人页

关注

展开全部

浏览器在处理mouseout事件时有bug，可能在一次鼠标移动中多次触发这个事件，因此要在mouseout事件的处理函数中做一下筛选。
把你的deleteShade函数改一下即可：
function deleteShade() {
    var div = document.getElementById("sh") || document.getElementById("sh1") || document.getElementById("sh2");

    var oEvent = (window.event) ? window.event : arguments[0];
    var src = (window.event) ? oEvent.srcElement : oEvent.target;
    //一定要是从div标签离开的
    if (src.tagName.toUpperCase() != "DIV") return;

    var target = (window.event) ? oEvent.toElement : oEvent.relatedTarget;
    //看看目标节点是不是div的子节点
    while (target != div && target != document.body) {
        target = target.parentNode;
    }
    if (target == document.body && shade.parentNode == document.body) {
        document.body.removeChild(shade);
    }
}


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

高分求助：懂javascript的高手请进！

为你推荐：