javascript - 非IE浏览器鼠标捕获？

Question

我用 JS 制作了类似拖放元素的东西。

function Draggable(elm) {
    this.d = elm;
    this.style.position = "absolute";
    elm.onselectstart = elm.ondragstart = function() { return false; }
    elm.addEventListener('mousedown', this._start.bindAsEventListener(this), false);
}
Draggable.prototype._start = function (event) {
    this.deltaX = event.clientX;
    this.deltaY = event.clientY;
    if (!this.dm) {
        this.dm = document.createElement("div");
        this.dm.setAttribute("class", "dragger");
        this.dm.onmousemove = this._move.bindAsEventListener(this);
        this.dm.onmouseup = this._stop.bindAsEventListener(this);
        this.dm.onselectstart = RetFalse;
        this.dm.ondragstart = RetFalse;
    }
    document.body.appendChild(this.dm);

    this.lastX = this.lastY = 0;
    this.ondragstart();
    return false;
}
Draggable.prototype._move = function (event) {
    var newx = (event.clientX - this.deltaX);
    var newy = (event.clientY - this.deltaY);
    if (newx < this.x0) newx = this.x0;
    if (newx > this.x1) newx = this.x1;
    if (newy < this.y0) newy = this.y0;
    if (newy > this.y1) newy = this.y1;
    this.d.style.left = newx + "px";
    this.d.style.top = newy + "px";
    if (window.getSelection) window.getSelection().removeAllRanges(); else document.selection.empty();
    return false;
}
Draggable.prototype._stop = function (event) {
    document.body.removeChild(this.dm);
    return false;
}

“拖动器”是透明的 DIV，它会填满整个页面，以防止鼠标移动过快时拖动的目标丢失捕获。 (如果我能捕获鼠标，我会需要它。)

.dragger {
    cursor:move;
    position:absolute;
    width:100%;height:100%;
    left:0px;top:0px;
    margin:0px;padding:0px;
    z-index:32767;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

但是，如果我:

1. 在可拖动元素上按下鼠标左键
2. 将其拖出客户区(浏览器窗口外)
3. 松开鼠标键

该元素将失去捕获，因此如果我将光标移回，在没有接收到鼠标弹起事件的情况下，元素随处跟随光标。(直到您再次单击鼠标。)

刚才，我在这个网站上看到它完美地完成了:(www.box.net) 即使您在浏览器窗口外释放鼠标按钮，蓝色选择框仍会随着光标移动而调整大小，并在释放按钮时消失。

但是当光标在外面时，我无法接收到任何 mousemove 或 mouseup。

我可以使用什么 API 来捕获鼠标？

如您所见，我使用的是 Chrome 浏览器。据说非IE浏览器没有HTMLElement.setCapture这样的API。

这个页面使用了jQuery，但是jQuery用的是什么？执行此操作的原始 javascript 代码是什么？

Answer 1

与其创建大而透明的元素 (dm)，不如将鼠标事件绑定(bind)到 window。

它在页面各处获取鼠标事件；在拖动过程中，即使光标移到窗口外，您也会继续收到 mousemove 事件，如果您在窗口外释放鼠标按钮，也会收到 mouseup 事件。

附言如果您在 mousedown 事件上调用 .preventDefault()，浏览器将不会选择任何文本，您也不必在 mousemove< 上清除选择.