我自己的JavaScript庫有問題。看不到它在哪裏

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/

這個想法是隻在滑塊上註冊「mousedown」事件，而在窗口上只註冊「mousemove」和「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); 
    } 
} 

Answer 2

每次創建要覆蓋窗口和文檔鼠標事件處理新的滑塊，所以最後一個是有點貪心，並得到調用它的功能，當鼠標離開EL和別人不要」噸。我的建議是不要將窗口或文檔上的處理程序，並調用dragstop當鼠標離開滑塊的div

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

我也看到在Chrome中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/