Javascript 使用鼠标调整表格列的大小

我正在编写一个脚本，允许客户端用鼠标拖动表格单元格边框并调整表格中列的大小。到目前为止，我在Firefox中有一个工作模型，但是在宽度测量中有一个缺陷，当变化很大时，鼠标会失去同步。更糟糕的是，该脚本在其他浏览器（opera、safari）中失败，甚至在Firefox中更改浏览器缩放时也会失败

function doDrag() {document.body.style.cursor='crosshair';}

function noDrag() {document.body.style.cursor='auto';}

var xpos=0;
var sz=0;
var dragObj = {};
function resizeOn(el) 
    {
    dragObj = document.getElementById(el);
    document.addEventListener("mousemove",resize, true);
    document.addEventListener("mouseup",resizeOff, true);
    }

function resize(ev)
    {
    if(xpos == 0) {xpos=ev.clientX;}
    if(xpos != ev.clientX) 
        {
        sz = dragObj.offsetWidth + (ev.clientX - xpos);
        dragObj.style.width = sz - 10 + "px";
        alert("size="+sz+" offsetwidth="+dragObj.offsetWidth);
        if(dragObj.offsetWidth != sz)
            {
            resizeOff();
            return false;
            }
        xpos=ev.clientX;
        }
    }

function resizeOff() 
    {
    xpos = 0;
    document.removeEventListener("mousemove",resize, true);
    document.removeEventListener("mouseup",resizeOff, true);
    }

HTML看起来像：

<th id="col0" class="edit">client</th>
<th class="drag" onmouseover="doDrag()" onmouseout="noDrag()" onmousedown="resizeOn('col0')"></th>

客户端

第二个单元格显示为第一个单元格的右边缘

---

我假设问题是dragObj.style.width=sz-10。-10完全是通过反复试验得出的。我怀疑这是单元格的实际宽度（包括边框、填充等）与offsetwidth之间的差异。根据我的css，它应该是10表示填充+1表示左边框=11px。要么我的固定填充/边框没有保持固定，要么在offsetWidth和元素的实际with之间存在其他css属性。是否有某种方法可以在不考虑浏览器缩放的情况下获得元素的实际宽度？

请查看www.quirksmode.org和/或中的文档。确认目标浏览器是否支持这些属性。他们还对缩放如何影响offsetX和类似的内容发表了评论

另外，您应该注意到，最近的一个补丁（KB2846071）在IE中破坏了ev.clientX。如果安装了修补程序，clientX将返回一个无意义的结果。

---

希望微软能为他们的补丁发布补丁

我知道你没有要求这样做，但是，如果可以的话：看。你为什么不使用？不是JQuery用户。但是我怀疑JQuery是否能做到，javascript也能做到。顺便说一下，我在几篇文章中读到，声明一个全局对象变量是不好的。那么，有人知道如何在没有全局变量的情况下通过事件侦听器传递变量吗？