這幾天在用JS繪制一棵功能強大的樹。其中實現了每個樹節點的拖拽及各個節點之間的交互,期間需要獲取鼠標的當前位置的坐標,這個坐標是相對於整個document內容的。
由於IE和FF等浏覽器獲取鼠標時對JS的解釋不同,因此我們要構造一個可以兼容大多數浏覽器的獲取方式。經過測試,下面的方式兼容了IE(類似IE6等低版本浏覽器請無視)、FireFox、Chrome等目前主流的浏覽器。
function mousePosition(evt){
var xPos,yPos;
evt=evt || window.event;
if(evt.pageX){
xPos=evt.pageX;
yPos=evt.pageY;
} else {
xPos=evt.clientX+document.body.scrollLeft -document.body.clientLeft;
yPos=evt.clientY+document.body.scrollTop-document.body.clientTop;
}
return [xPos, yPos];
}
// evt為已知已觸發的事件
var _mousePosition = mousePosition(evt);
evt.pageX = _mousePosition[0]; // 鼠標的X坐標
evt.pageY = _mousePosition[1]; // 鼠標的Y坐標
// 使用evt的pageX和pageY做其他事情...
*