javascript - 模拟框架集分隔符行为

Question

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

<frameset> 有一个很好的特性没有它就不容易复制:

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

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

我遇到了 the following这证明了我正在寻找的行为。但是我想避免使用 JQuery，即使使用 jQuery 应该是首选方式。

Answer 1

在查看了您的示例 fiddle 之后，我可以说，如果没有 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;
};

所以这是与 pure JS 相同的 fiddle .

---

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

在 DOM 元素上覆盖 onmouseup、onload、onclick 等属性是“旧”方式，因此它甚至在JS的石器时代。我上面的代码就是这样写的。

现在添加和删除事件处理程序的标准方法是 addEventListener和 removeEventListener .旧版 IE 不支持它们(但这可以是 worked around )。

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

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

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);

Fiddle .

请注意，在这种情况下，我的函数不是匿名的，因此 self executing function如果您不在功能范围内，那么此处的范围界定是有意义的。