模拟框架集分隔符行为 [英] Emulate Frameset Separator Behavior

问题描述

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

The HTML5 current specification removed the <frameset> tag.

有一个很好的功能< frameset> 没有它就不容易重现：

There is a nice feature of <frameset> which is not easy to reproduce without it:

在框架集中，你可以改变位置用鼠标分隔框架的线条。

In a frameset, you can change the position of the line separating the frames with the mouse.

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

How would I provide the same functionality with with using DIVs in JavaScript?

我遇到过< a href =http://www.jsfiddle.net/gaby/Bek9L/ =nofollow>以下展示了我正在寻找的行为。但是我想避免使用JQuery，即使使用jQuery应该是首选方式。

I've come across the following which demonstrates the behavior I'm looking for. However I would like to avoid using JQuery, even though using jQuery should be the preferred way.

推荐答案

看完你的示例小提琴后，我可以说没有jQuery这实际上很容易。

After looking at your example fiddle, I can say that this is actually quite easy without jQuery.

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

All the functions there are just simple innerHTML and style manipulation, and event subscription.

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

A direct rewrite of that code without jQuery would be:

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 。

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

EDIT: As @BenjaminGruenbaum pointed out, overriding the on* properties on a DOM element is not the same as specifying a new event handler.

覆盖属性，如 onmouseup ， onload ， onclick 是旧的方式，因此它甚至在JS的石器时代得到了支持。我上面的代码是这样写的。

Overriding properties like onmouseup, onload, onclick on DOM elements is the "old" way, and therefore it was supported in even the stone age of JS. My code above was written like that.

现在添加和删除事件处理程序的标准方法是 addEventListener 和 removeEventListener 。旧的IE不支持它们（但这可以是解决了这个问题。）

Nowadays the standard way of adding and removing event handlers are addEventListener and removeEventListener. They are not supported in old IE (but this can be worked around).

它允许你为同一个事件附加无限数量的听众，他们不会互相干扰。

It let's you attach unlimited number of listeners to the same event and they will not interfere with each other.

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

So the same functionality can be achieved by:

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

小提琴。

请注意，在这种情况下，我的函数不是匿名的，所以自我执行功能的范围是有意义的。

Note that in this case my functions are not anonymous, so a self executing function for scoping would make sense here, if you are not already in function scope.

这篇关于模拟框架集分隔符行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！