我自己的JavaScript库出现错误.可以'我不知道它在哪里

Bug with my own JavaScript library. Can't see where it is

本文关键字：我不知道 在哪里 可以 错误 JavaScript 自己的 我自己      更新时间：2023-09-26

我有自己的JavaScript Slider库，这是我开发的。当我只初始化一个滑块时，它工作得很好，但当初始化了多个滑块时会出现一些问题。

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

LAST滑块工作平稳而完美，但前两个没有，我看不出问题出在哪里。如果你开始拖动第一个滑块，并在拖动时用光标做一些圆周运动，滑块就会停止！由于某种原因，最后一个没有发生。

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

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

编写时：window.onmousemove=dragMove；window.onmouseup=dragStop；

您实际上设置了window.onmousemove/omouseup函数。也就是说，如果以前设置了一些函数，则下一个调用将替换上一个调用。您必须有某种类型的draggers容器，其中包含对您的dragger的引用，以便窗口上的事件能够处理所有这些引用。或者，你也可以替换它（尽管它可能不是最好的性能）：

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/

其想法是只在滑块上注册"mousedown"事件，只在窗口上注册"mousemove"answers"mouseup"事件。

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

鼠标按下时，存储当前滑块信息（确切地说，存储鼠标向上和鼠标移动回调）：

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

每次创建新的滑块时，都会覆盖窗口和文档鼠标事件处理程序，因此最后一个事件处理程序有点贪婪，当鼠标离开el时可以调用它的函数，而其他的则没有。我的建议是不要在窗口或文档上放置处理程序，并在鼠标离开滑块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/

相关文章：