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 = 拖动移动； 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);
    }
}