javascript - 我自己的 JavaScript 库有问题。看不到它在哪里

Question

我有自己开发的 JavaScript Slider 库。当我只初始化一个 slider 时效果很好，但当初始化了多个 slider 时会出现一些问题。

如您所见: http://jsfiddle.net/bingo14/bhymxrqr/6/

最后一个 slider 运行流畅完美，但前两个 slider 运行不正常，我看不出问题出在哪里。如果您开始拖动第一个 slider 并在拖动时用光标做一些圆周运动，则 slider 会停止!由于某种原因，最后一个没有发生。

我的事件处理程序可能有问题吗？

dragger.onmousedown = dragStart; 
dragger.onmousemove = dragMove; 
dragger.onmouseup = dragStop; 

window.onmousemove = dragMove; 
window.onmouseup = dragStop; 
.....

Answer 1

当你写的时候: window.onmousemove = dragMove; window.onmouseup = dragStop;

您实际上设置了 window.onmousemove/onmouseup 函数。也就是说，如果之前设置了某些功能，则下一次调用将替换之前的调用。您必须有某种包含拖动器引用的拖动器容器，以便窗口上的事件可以解决所有这些问题。或者你也可以替换它(尽管它可能不是最好的性能):

window.onmousemove = dragMove; 
window.onmouseup = dragStop; 

用这个:

var oldWinMouseMove = window.onmousemove;
var oldWinMouseUp = window.onmouseup;
window.onmousemove = function(e) {
    if (typeof oldWinMouseMove === 'function') {
        oldWinMouseMove(e);
    }
    dragMove(e);
};
window.onmouseup = function(e) {
    if (typeof oldWinMouseUp === 'function') {
        oldWinMouseUp(e);
    }
    dragStop(e);
};

---

---

更好的解决方案

根据要求，这里有一个更好的选择，可以避免像上面的解决方案那样创建一个大的调用堆栈: http://jsfiddle.net/bhymxrqr/10/

想法是仅在 slider 上注册“mousedown”事件，而仅在窗口上注册“mousemove”和“mouseup”事件。

// In "Slider":
dragger.onmousedown = dragStart;
// (nothing here about mousemove/up)

在按下鼠标时，存储当前 slider 信息(准确地说，存储 mouseup 和 mousemove 回调):

window.activeSlider = {
    dragMove: dragMove,
    dragStop: dragStop
};

在窗口鼠标移动时，调用存储的“鼠标移动”回调；鼠标松开也是如此，另外还删除了存储的回调。

///////////////////////////
// Register window global slide handlers

window.onmousemove = function(e) {
    if (window.activeSlider !== undefined) {
        window.activeSlider.dragMove(e);
    }
}
window.onmouseup = function(e) {
    if (window.activeSlider !== undefined) {
        window.activeSlider.dragStop(e);
    }
}