用htc作一个支持HTML的tooltip 但是遇到了困难！！？

[Go_Rush]

这是我的html文件代码


-----

<span label="测试文字<a href='http://www.371.net'>www.371.net</a><br><br>111<button>按钮</button>其它文字" style="behavior: url('showtip.htc');">鼠标过来看看</span>


-----


我的思路是这样的。
把tooltip的内容(支持html)定义在span的label属性里面，

1.当鼠标划入<span>的时侯,用document.createElement建一个div,
并让他在鼠标处显示.
2.当鼠标离开<span>的时候,删除这个div
(注:但是如果鼠标离开了span，进入了div,则不进行删除操作)

3.在div的鼠标离开事件中，删除该div
???但是当鼠标划入div内部的一个button或者链接的时候，
也会触发div的mouseout事件，从而导致div的删除，我应该怎么做才能避免这种现象的发生???



以下是 showtip.htc的代码

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="element.init()" />
<PUBLIC:METHOD NAME="init" />
<SCRIPT Language="javascript">
var divExist = false;
var oDivLabel;

function ShowLabel(){
if (!divExist) {
oDivLabel = element.document.createElement("DIV");
oDivLabel.innerHTML = element.getAttribute("LABEL");
oDivLabel.style.cssText="border : solid gray thin;background-color:rgb(229,229,229);position:absolute;width:222px"

oDivLabel.attachEvent("onmouseout",function(){

//如果鼠标进入div内部的一个tag,我想放弃处理，但是为什么这句没有效果？
//if (oDivLabel.contains(event.srcElement)) return;

if (divExist) element.document.body.removeChild(oDivLabel);
divExist = false;
});
element.document.body.appendChild(oDivLabel);
divExist = true;
}
oDivLabel.style.left = event.clientX;
oDivLabel.style.top = event.clientY;
}

function ClearLabel(){
//如果鼠标离开了span，进入了div,则放弃处理，不进行删除操作
if (event.clientX>oDivLabel.offsetLeft && event.clientY>oDivLabel.offsetTop) return false;

if (divExist) element.document.body.removeChild(oDivLabel);
divExist = false;
}

function init(){
element.attachEvent("onmouseover",ShowLabel);
element.attachEvent("onmouseout",ClearLabel);
}
</SCRIPT>
</PUBLIC:COMPONENT>

[Lostinet]

同意楼上,

对于这个
element.document.body.appendChild(oDivLabel);
也是不好的。

应该直接这样：
element.appendChild(oDivLabel);
然后用相对element的定位。
(这样event.toElement才有可能有oDivLabel的一份)

而事件是这样判断的：
function onmouseout(event)
{
if(element.contains(event.toElement))return;
//..
}

[Lostinet]

这个是个例子：

<table>
<tr><td>-------------------<br>-------------------<br>-------------------<br>-------------------<br>
<tr><td>dasfd</td><td style="background-color:gray">

<tr><td>daf</td><td>
<div id=move1 style="position:absolute;width:200px;height:200px;left:44px;top:55px;background-color:#e0e2e0">

<div id=move2 style="position:relative;width:100px;height:100px;left:30px;top:30px;background-color:blue">
<div id=move3 style="width:50px;height:50px;left:15px;top:15px;background-color:red">
<br><br>


<span id=idspan
MsgHTML="<span style="color:red">ttttttttttttttest</span>"
style="behavior:url(test.htc);color:mediumblue;background-color:white"
>
这里
</span>

<button>def</button>
</div>

<br><br><button>abc</button>
</div>
<br><br>
<button>001</button>
</div>
</td><td>dasfd</td></tr>
<tr><td>dsfa</td></tr></table>

<script>

setInterval(UpdateMsgHTML,100);
function UpdateMsgHTML()
{
idspan.MsgHTML=new Date().getTime();
}

</script>

[Lostinet]

<PUBLIC:COMPONENT>
<PUBLIC:PROPERTY NAME="MsgHTML" GET="_get_MsgHTML" PUT="_put_MsgHTML"/>
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="_onmouseover()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="_onmouseout()" />
</PUBLIC:COMPONENT>
<SCRIPT>

var thediv=null;
var MsgH="";

function _get_MsgHTML()
{
return MsgH;
}
function _put_MsgHTML(v)
{
MsgH=v;
if(thediv)
thediv.innerHTML=MsgH;
}

function _onmouseover()
{
if(element.contains(event.fromElement))return;
if(thediv)return;

//assert(thediv==null);
thediv=window.document.createElement("DIV");
with(thediv)
{
innerHTML=MsgH;
}
with(thediv.runtimeStyle)
{
position="absolute";
left=GetClientScrollX(element)+"px";
top=GetClientScrollY(element)+element.offsetHeight-1+"px";
width="100px";
overflowX="visible";
backgroundColor="infobackground";
color="infotext";
border="1px outset gray";
}
element.appendChild(thediv);
}
function _onmouseout()
{
if(element.contains(event.toElement))return;
if(thediv);else return;

thediv.removeNode(true);
thediv=null;
}

function GetClientScrollX(e)
{
var v=0;

do
{
v+=e.offsetLeft;
}while(e=e.offsetElement);

return v;
}
function GetClientScrollY(e)
{
var v=0;

do
{
v+=e.offsetTop;
}while(e=e.offsetElement);

return v;
}


</SCRIPT>

[qiushuiwuhen]

改成
if (oDivLabel.contains(event.toElement)) return;

[flyer_2001]

mark