div层触发的问题?



testing...

<center>
    x:<input type="text" id="x_id" value="" />
    y:<input type="text" id="y_id" value="" />
</center>
<!-- 
    body 中的 text-align:center;
    以及
    div 中的 margin:0px auto;
    是为了让 div 居中
-->
<div id="div_1" onMouseOver="showTip(event)" onMouseOut="hideTip()" 
    style="margin:0px auto;text-align:left;width:600px;height:60px;background-color:#DFE8F6;">
    <a href="www.baidu.com">我晕我怎么不行呢?</a>
    与其在悬崖上展览千年,不如在爱人肩头痛哭一晚。<br />
    那弯弯的一轮新月,分明暗示着:怀抱着未来的圆满。<br />
</div>
<div id="div_2" style="position:absolute;text-align:left;background-color:#808080;">
    生如夏花之灿烂<br />
    死如秋叶之静美<br />
    换我心,为你心,此知相忆深。<br />
</div>

function showTip(evt){ evt = evt || window.event; var x,y; if(evt.pageX || evt.pageY){ // firefox x = evt.pageX; y = evt.pageY; }else{ // ie x = evt.clientX + document.body.scrollLeft - document.body.clientLeft; y = evt.clientY + document.body.scrollTop - document.body.clientTop; } // document.getElementById("x_id").value = x; document.getElementById("y_id").value = y; // 获取 div_1 的左下角坐标 var div_el = document.getElementById("div_1"); var div_left = div_el.offsetLeft; var div_top = div_el.offsetTop + div_el.offsetHeight; // 设置 div_2 的 左上角坐标 var div_tip = document.getElementById("div_2"); div_tip.style.display = ''; div_tip.style.left = div_left + "px"; div_tip.style.top = div_top + "px"; } function hideTip(){ var div_tip = document.getElementById("div_2"); div_tip.style.display = 'none'; }

问题:在div_1层里加了一个超链接,怎么让鼠标移动到超链接的时候,不触发hideTip()事件?
[b]问题补充:[/b]
是啊是啊,会触发div_1的onmouseout

因为这是层里的超链接所以我不想触发onmouseout怎么办?
[b]问题补充:[/b]
我想有这个监听的,但是,现在层里包含了其他的标签,鼠标移动到这个标签,就触发了层的onmouseout,我想这个时候不触发他,就是在鼠标在层里的东西里的时候
不触发他.不管层里是否是嵌套标签等
[b]问题补充:[/b]
用你的话说

我是想不让这个标签不游离div_1这个层

把hideTip方法改为这样
[code="java"]
function hideTip(){
var div_tip = document.getElementById("div_2");
if(!div_tip.contains(event.toElement))
{
div_tip.style.display = 'none';
}
}
[/code]

因为鼠标移到链接上,会悬停,先触发 div的onMouseOut时间,所以我们加个判断,如果是属于当前DIV的元素,就不执行了。

好了,记得要加分啊,楼主,加油!

鼠标移动到超链接的时候,本来就不触发hideTip()事件

应该是指鼠标移出的时候吧

我晕我怎么不行呢? 试试看

[color=blue]只有在鼠标移出div_1时,才触发 onMouseOut事件,进而调用hideTip方法。

如果不想有这个监听,直接去掉div_1上的onMouseOut事件监听功能。就行了
[/color]

奇怪,我这边ie7,ff都是不会触发的,没你说的这个问题

使用事件冒泡是不一定能达到效果,因为在布局中,后面的文字使得a标签游离出了div布局。
解决办法就是将后面的文字用div再套起来。
[code="html"]

style="display: block; margin: 0px auto; text-align: left; width: 600px; height: 60px; background-color: #DFE8F6;">
我晕我怎么不行呢?

与其在悬崖上展览千年,不如在爱人肩头痛哭一晚。


那弯弯的一轮新月,分明暗示着:怀抱着未来的圆满。



[/code]

我把你的代码复制下来,在IE7和FF里都测试过,并不存在你说的问题。
鼠标离开链接的时候本来就不会触发mouseout事件

建议你检查下,是否存在其它的原因。

其实就一句话,就是原本的html格式不规范,建议不要使得标签与文本同级排列。
也就是说,每段文本都有直接的span或div标签括起来

楼主用的是什么浏览器,什么版本,我的在IE6和FF3.5.7下把鼠标放到A链接上不会触发div的mouseout事件。
[code="java"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Div Event function showTip(evt){ var browserType = 'ie'; evt = evt || window.event; var x,y; if(evt.pageX || evt.pageY){ // firefox browserType = 'ff'; x = evt.pageX; y = evt.pageY; }else{ // ie x = evt.clientX + document.body.scrollLeft - document.body.clientLeft; y = evt.clientY + document.body.scrollTop - document.body.clientTop; } // document.getElementById("x_id").value = x; document.getElementById("y_id").value = y; // 获取 div_1 的左下角坐标 var div_el = document.getElementById("div_1"); var div_left = div_el.offsetLeft; var div_top = div_el.offsetTop + div_el.offsetHeight; if("ie" == browserType){ //IE6 div_left += 10; div_top += 15; } // 设置 div_2 的 左上角坐标 var div_tip = document.getElementById("div_2"); div_tip.style.display = 'block'; div_tip.style.left = div_left + "px"; div_tip.style.top = div_top + "px"; } function hideTip(){ var div_tip = document.getElementById("div_2"); div_tip.style.display = 'none'; }



x:
y:
我晕我怎么不行呢?
与其在悬崖上展览千年,不如在爱人肩头痛哭一晚。
那弯弯的一轮新月,分明暗示着:怀抱着未来的圆满。
生如夏花之灿烂
死如秋叶之静美
换我心,为你心,此知相忆深。


[/code]