模拟框架集分隔符行为

Question

HTML5 当前规范删除了该<frameset>标签。

有一个很好的功能，如果<frameset>没有它，就很难重现：

在框架集中，您可以使用鼠标更改框架分隔线的位置。

如何在 JavaScript 中使用 DIV 提供相同的功能？

我发现以下内容演示了我正在寻找的行为。然而，我想避免使用 JQuery，尽管使用 jQuery 应该是首选方式。

Answer 1

看了你的例子小提琴之后，我可以说，如果没有 jQuery，这实际上很容易。

所有的功能都只是简单的innerHTML操作style和事件订阅。

不使用 jQuery 直接重写该代码将是：

var i = 0;

document.getElementById("dragbar").onmousedown = function (e) {

    e.preventDefault();
    document.getElementById("mousestatus").innerHTML = "mousedown" + i++;
    window.onmousemove = function (e) {
        document.getElementById("position").innerHTML = e.pageX + ', ' + e.pageY;
        document.getElementById("sidebar").style.width = e.pageX + 2 + "px";
        document.getElementById("main").style.left = e.pageX + 2 + "px";
    };

    console.log("leaving mouseDown");
};

window.onmouseup = function (e) {
    document.getElementById("clickevent").innerHTML = 'in another mouseUp event' + i++;
    window.onmousemove = null;
};

所以这里是与纯 JS相同的小提琴。

编辑：正如 @BenjaminGruenbaum 指出的那样，覆盖on*DOM 元素上的属性与指定新的事件处理程序不同。

重写 DOM 元素上的onmouseup, onload,onclick等属性是“古老”的方式，因此即使在 JS 的石器时代也支持它。我上面的代码就是这样写的。

如今添加和删除事件处理程序的标准方法是addEventListener和removeEventListener。旧版 IE 不支持它们（但这可以解决）。

它允许您将无限数量的侦听器附加到同一事件，并且它们不会相互干扰。

因此可以通过以下方式实现相同的功能：

var i = 0;

function dragBarMouseDown(e) {
    e.preventDefault();
    document.getElementById("mousestatus").innerHTML = "mousedown" + i++;
    window.addEventListener("mousemove", windowMouseMove, false);
    console.log("leaving mouseDown");
}

function windowMouseMove(e) {
    document.getElementById("position").innerHTML = e.pageX + ', ' + e.pageY;
    document.getElementById("sidebar").style.width = e.pageX + 2 + "px";
    document.getElementById("main").style.left = e.pageX + 2 + "px";
}

function windowMouseUp(e) {
    document.getElementById("clickevent").innerHTML = 'in another mouseUp event' + i++;
    window.removeEventListener("mousemove", windowMouseMove, false);
}

document.getElementById("dragbar").addEventListener("mousedown", dragBarMouseDown, false);

window.addEventListener("mouseup", windowMouseUp, false);

小提琴。

请注意，在这种情况下，我的函数不是匿名的，因此如果您尚未处于函数作用域中，那么用于作用域的自执行函数在这里是有意义的。