js获取鼠标坐标，设置div的高度、位置、内容等，及注意要点

后台：GridView控件的方法

protected void ShowGrid_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//string str1,.........
e.Row.Cells[2].Attributes.Add("onmouseover", "mouseOverTip('" + str1+ "','" + str2+ "','" + "......"+ "')");
e.Row.Cells[2].Attributes.Add("onmouseout", "mouseOutTip()");
//e.Row.Cells[2].Attributes.Add("onmousemove", "mousemoveTip('" + str1+ "','" + str2+ "','" + "......"+ "',event)");
e.Row.Cells[2].Attributes.Add("onmousemove", "mousemoveTip2(event)");
}

if (e.Row.RowType == DataControlRowType.DataRow)//-1 != e.Row.RowIndex
{
//鼠标经过时，行背景色变
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#00A9FF'");
Button1.Text = e.Row.RowIndex.ToString(); Forecast_DataBind(((Label)(e.Row.Cells[0].Controls[1])).Text.ToString().Trim());
//鼠标移出时，行背景色变
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF'");
}
}

前台：javascript部分

<script type="text/javascript" >
function mouseOverTip(str1,str2,....) {
var div1 = document.getElementById("tipdiv");
div1.style.display = "block";
document.getElementById("gnamediv").innerHTML = "站名：" + str1;
document.getElementById("wstatusdiv").innerHTML = "天气现象：" + str2;
//......
}
function mouseOutTip() {
var div1 = document.getElementById("tipdiv");
div1.style.display = "none";
}
function mousemoveTip(str1,str2,.....,event) {
var div1 = document.getElementById("tipdiv");
div1.style.display = "block";
document.getElementById("gnamediv").innerHTML = "名称：" + str1;
document.getElementById("wstatusdiv").innerHTML = "天气：" + str2;
//......
var x, y;
var e = e || event;
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft + 20;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
div1.style.position = "absolute";
div1.style.top = y + "px";
div1.style.left = x + "px";
}
function mousemoveTip2(event) {
var div1 = document.getElementById("tipdiv");
var x, y;
var e = e || event;
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft + 20;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
div1.style.position = "absolute";
div1.style.top = y + "px";
div1.style.left = x + "px";
}
</script>

实现功能：当鼠标悬停在、离开、移动于gridview第2列上时，展现细节内容的div层或显示、或隐藏、或移动。

注意要点（易出问题的地方）：1、div1.style.display = "block"; "block"需要加引号。

2、div1.style.position = "absolute"; 这一句是需要的。

3、div1.style.left = x + "px"; 需要加上"px"。如果缺少，只能在搜狗浏览器上正常运行，起作用；在IE、FireFox、360浏览器上，div的位置将是固定不随鼠标动的。

4、var e = e || event; 这里应该是event，不应该是window.event。如果写成window.event，在FireFox上不兼容。