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

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

i have own javascript slider library, i've developed. works well, when initialize 1 slider, has problems, when there's more 1 slider initialized.

as can see here: http://jsfiddle.net/bingo14/bhymxrqr/6/

the lastly slider works smoothly , perfectly, first 2 don't , can't see problem is. if start dragging first slider , circular motions cursor while dragging, slider stops! doesn't happen lastly 1 reason.

could wrong event handlers?

dragger.onmousedown = dragstart; dragger.onmousemove = dragmove; dragger.onmouseup = dragstop; window.onmousemove = dragmove; window.onmouseup = dragstop; .....

when write: window.onmousemove = dragmove; window.onmouseup = dragstop;

you set window.onmousemove / onmouseup functions. is, if functions set, next phone call replaces previous one. must have sort of draggers container holds references of dragger, events on window can address of them. or alternatively can replace (although may not best performances):

window.onmousemove = dragmove; window.onmouseup = dragstop;

with this:

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

better solution

as requested, here improve alternative avoid create big calling stack solution above : http://jsfiddle.net/bhymxrqr/10/

the thought register "mousedown" event on sliders only, , "mousemove" , "mouseup" events on window only.

// in "slider": dragger.onmousedown = dragstart; // (nothing here mousemove/up)

on mouse down, current slider info stored (to exact, mouseup , mousemove callback stored):

window.activeslider = { dragmove: dragmove, dragstop: dragstop };

on window mouse move, stored "mouse move" callback called ; , same mouse up, in add-on removal of stored callbacks.

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

javascript oop events slider handlers