用htc作一个支持HTML的tooltip 但是遇到了困难!!?
这是我的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>