昨天帮经典一位朋友解决了一个js的问题，但今天看一位网友回帖让偶郁闷了半天。“ 3楼的在Firefox里啥也没有”，偶打开ff测试了下，果然是没有任何反映，看来标准上的问题以后要多多注意了。出现了好几次这样的问题了。
原来楼主的问题时实现一种模拟title的一种很漂亮的效果，昨天下午偶花了半天功夫搞定了，代码如下：
<html>
<head>
<title></title>
<style type="text/css">
*{
font-size:9pt;
margin:0px;padding:0px;
}
#tips{
position:absolute;display:none;
background:#FF6633;width:250px;
border:1px solid #000;color:#fff
}
#title{
background:#333;padding:0px 3px;
height:20px;line-height:20px;
text-align:right;font-weight:bold;
}
#content{
height: 20px;
padding:2px;
}
</style>
<script type="text/javascript">
function addEvent(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
function linkTitle(){
if(!document.getElementsByTagName) return ;
var anchors=document.getElementsByTagName("a");
for(var i=0;i<anchors.length;i++){
anchor=anchors[i];
if(anchor.getAttribute("tip")){
addEvent(anchor,"mouseover",linkMouseOver);
addEvent(anchor,"mouseout",linkMouseOut);
}
}
}
function linkMouseOver(){
var title=document.getElementById("tips");
title.style.top=event.y;
title.style.left=event.x;
title.style.display="block";
document.getElementById("title").innerHTML=event.srcElement.getAttribute("tip").split(":")[0];
document.getElementById("content").innerHTML=event.srcElement.getAttribute("tip").split(":")[1];
}
function linkMouseOut(){
document.getElementById("tips").style.display="none";
}
</script>
</head>
<body>
<div id="tips">
<div id="title"></div>
<div id="content"></div>
</div>
<div style="display:block">
<a href="#" tip="标题一:内容一在这里">link1</a><br />
<a href="#" tip="标题二:内容二在这里">link2</a><br />
<a href="#">link3</a><br />
<a href="#">link4</a><br />
<a href="#">link5</a><br />
<a href="#">link6</a><br />
<a href="#">link7</a><br />
</div>
<script type="text/javascript">
linkTitle();
</script>
</body>
</html>
在ie下测试没有任何问题，实现了楼主需要的效果。但在ff下就是没有任何的效果。愤怒之下在网上寻找关于ie与ff在js上的区别。终于解决了问题。总结如下：
1，
W3C（ff）不支持windows.event，在ie下window.event作为一个全局变量，任何时刻都可以直接访问，如event.srcElement,event.x,等，但在ff下必须要定义event事件，方法如下：
function getEvent(evt){
ev=evt||window.event；
//在ie下由于获取不到evt的内容所以将window.event赋给ev，在ff下，浏览器可以通过外部参数evt获取evt，因此将evt赋给ev
}
这样就可以ev变量使用event事件了。
2，W3C(ff)的event不存在srcElement属性，等同于srcElement的属性为target,因此在ff下要用event.target代替ie下的event.srcElement。
3，在ie下获取鼠标的相对于窗体坐标用event.x/event.y,event.clientX/event.clientY,而在ff下用event.pageX/event.pageY.
4,在ff下为xx.style.top和xx.style.left赋值必须要加上px单位，如xx.style.top=a+"px";否则不能正常显示。在ie下则可以省略px。
综合以上四点，偶修改了自己的代码，终于在ff下也显示出相同效果了。代码如下：
<html>
<head>
<title></title>
<style type="text/css">
*{
font-size:9pt;
margin:0px;padding:0px;
}
#tips{
position:absolute;display:none;
background:#FF6633;width:250px;
border:1px solid #000;color:#fff
}
#title{
background:#333;padding:0px 3px;
height:20px;line-height:20px;
text-align:right;font-weight:bold;
}
#content{
height: 20px;
padding:2px;
}
</style>
<script type="text/javascript">
function addEvent(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
function linkTitle(){
if(!document.getElementsByTagName) return ;
var anchors=document.getElementsByTagName("a");
for(var i=0;i<anchors.length;i++){
anchor=anchors[i];
if(anchor.getAttribute("tip")){
addEvent(anchor,"mouseover",linkMouseOver);
addEvent(anchor,"mouseout",linkMouseOut);
}
}
}
function linkMouseOver(ev){
var ev=ev||window.event;
var title=document.getElementById("tips");
title.style.top=(ev.clientY||ev.pageY)+"px";
title.style.left=(ev.clientX||ev.pageX)+"px";
title.style.display="block";
document.getElementById("title").innerHTML=(ev.srcElement||ev.target).getAttribute("tip").split(":")[0];
document.getElementById("content").innerHTML=(ev.srcElement||ev.target).getAttribute("tip").split(":")[1];
}
function linkMouseOut(){
document.getElementById("tips").style.display="none";
}
</script>
</head>
<body>
<div id="tips">
<div id="title"></div>
<div id="content"></div>
</div>
<div style="display:block">
<a href="#" tip="标题一:内容一在这里">link1</a><br />
<a href="#" tip="标题二:内容二在这里">link2</a><br />
<a href="#">link3</a><br />
<a href="#">link4</a><br />
<a href="#">link5</a><br />
<a href="#">link6</a><br />
<a href="#">link7</a><br />
</div>
<script type="text/javascript">
linkTitle();
</script>
</body>
</html>