Question

使用此代码，您可以将蓝线向右和向左拖动，分割两个内容。问题是，如果我按住鼠标并快速移动到其中一侧并放开鼠标，它仍然处于活动状态。

所以直到我猜不到，或者还有其他问题吗？

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

所以问题是你只是在你父.Container的父母身上听鼠标事件，但当你快速向左或向右移动你的鼠标时它会从容器中移出你释放你的鼠标， mouseup事件在那里注册，而不是.Container。

解决此问题的一种方法是，您可以在整个页面上侦听鼠标。

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

我已经按照预期的方式修改了您的代码，请在此处查看Jsbin

从Epvenet mouseup可观察到的不准确

1 个答案: