我正在尝试使用getBoundingClientRect()获取可编辑div中光标的y坐标。IE分支代码有效，但其他分支（例如Firefox 3.5，用于当前测试目的）无效。
以下代码中具有问题的行已在注释中用***标记。在代码的那一点上，selObj和selRange都具有值（在Firebug中确认），但我无法调用它们中的任何一个的getBoundingClientRect()（例如，gives e.g.selObj.getBoundingClientRect is not a function）。我已经阅读到getBoundingClientRect()现在在Firefox上支持Range对象，但我无法让它发挥作用。我猜我必须在错误的对象类型上调用它...？我应该调用它吗？
以下代码是包含相关javascript的完整测试案例的html文件。在IE中查看，我可以得到光标的y坐标值，但在Firefox中它会弹出。
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#pageContainer {
padding:50px;
}
.pageCommon {
width: 100px;
height: 100px;
background-color:#ffffD0;
padding: 10px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>
<div id="pageContainer">
<div id="editor" class="pageCommon" contenteditable onclick="setPageNav();" onkeypress="setPageNav();">
</div>
<div>y: <span id="y"></span></div>
</div>
<script>
var y;
function setPageNav() {
page = document.getElementById("editor");
if (window.getSelection) {
var selObj = window.getSelection();
var selRange = selObj.getRangeAt(0);
// *** Neither of these next two lines work, error is : selObj.getBoundingClientRect is not a function
y = selObj.getBoundingClientRect().top;
y = selRange.getBoundingClientRect().top;
} else if (document.selection) {
var range = document.selection.createRange();
y = range.getBoundingClientRect().top;
}
document.getElementById("y").innerHTML = y;
}
</script>
</body>
</html>