這幾天在用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做其他事情...*