Observable vonEvenet MouseUp ist nicht genau

Question

Mit diesem Code können Sie blaue Linie nach rechts und links ziehen, zwei Inhalte teilen. Das Problem ist, wenn ich meine Maus gedrückt halte und schnell auf eine der Seiten gehe und meine Maus loslasse, ist sie immer noch aktiv.

Also die Take bis nicht ausgeführt, denke ich, oder gibt es ein anderes Problem mit diesem?

var split = $('.drag'); 
var parent = $('.Container'); 

var mouseDowns = Rx.Observable.fromEvent(split, "mousedown"); 
var parentMouseMoves = Rx.Observable.fromEvent(parent, "mousemove"); 
var parentMouseUps = Rx.Observable.fromEvent(parent, "mouseup"); 

var drags = mouseDowns.flatMap(function(e){ 
    return parentMouseMoves.takeUntil(parentMouseUps); 
}); 

drags.subscribe(function(e) { 
    var $containerWidth = $('.Container').width(); 
    var clientX = $containerWidth - e.clientX; 

    if (clientX >= 50 && e.clientX >= 50) { 
     $('.left').css('right', clientX); 
     $('.right').css('width', clientX); 
    } 
}); 

jsbin.com

Answer 1

Das Problem ist also Sie mouseup Ereignis nur auf die Eltern hören, die Ihr .Container aber wenn Sie schnell Ihre Maus entweder nach links oder rechts bewegen, so dass sie aus dem Container geht und Sie lassen Ihre Maus los, das MouseUp-Ereignis ist dort registriert und nicht auf der .Container.

Eine Möglichkeit, dies zu beheben, können Sie für die Mouse-ups auf der gesamten Seite hören.

//.... 
var parentMouseMoves = Rx.Observable.fromEvent(parent, "mousemove"); 
var parentMouseUps = Rx.Observable.fromEvent($('html'), "mouseup"); 
//.... 

Ich habe Ihren Code ein wenig modifiziert, die wie erwartet funktioniert, ist es hier überprüfen Jsbin