Question

我有自己的JavaScript Slider库，我已经开发了它。它很有效，当我只初始化一个滑块，但有一些问题，当有多个Slider初始化时。

正如你在这里看到的： http://jsfiddle.net/bingo14/bhymxrqr/6/

最后一个滑块工作顺畅而完美，但前两个并不能解决问题所在。如果您在拖动时开始拖动第一个滑块并使用光标进行一些圆周运动，则滑块会停止！由于某种原因，最后一个没有发生。

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

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/

我们的想法是注册＆＃34; mousedown＆＃34;仅限滑块上的事件，以及＆＃34; mousemove＆＃34;和＆＃34; mouseup＆＃34;仅在窗口上的事件。

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

在鼠标按下时，存储当前滑块信息（确切地说，存储了mouseup和mousemove回调）：

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

在窗口鼠标移动时，存储的鼠标移动＆＃34;调用回调;对于鼠标向上，同样删除存储的回调。

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

Answer 2

每次创建一个新的滑块时，你都会覆盖窗口并记录鼠标事件处理程序，所以最后一个有点贪婪，当鼠标离开el并且其他人不在时，可以调用它的功能＆＃ 39;吨。我的建议是不要在窗口或文档上放置处理程序，并在鼠标离开滑块div时调用dragstop

  //bind event handlers 
            dragger.onmousedown = dragStart;
            dragger.onmousemove = dragMove;
            dragger.onmouseup = dragStop;




            holder.onmousemove = dragMove;
            holder.onmouseup = dragStop;

            line.onmousemove = dragMove;
            line.onmouseup = dragStop;

            el.onmousemove = dragMove;
            el.onmouseup = dragStop;

            el.onmouseleave = dragStop;

我也看到了镀铬的dgragger的一些重影，但这可以通过为gragger添加透明轮廓来轻松修复

.slider-dragger {
    position: absolute;
    width: 26px;
    height: 11px;
    border-radius: 3px;
    background-color: #555;
    top: -3px;
    left: 0px;
    cursor: pointer;
    z-index: 10;
    outline: 1px solid transparent;
}

这是一个显示最终结果http://jsfiddle.net/leighking2/bhymxrqr/9/

的小提琴

我自己的JavaScript库的错误。无法看到它的位置

2 个答案: