Observable from venet mouseup是不准确的

Observable fromEvenet mouseup is not accurate

本文关键字：不准确 mouseup from venet Observable      更新时间：2023-09-26

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

所以take until没有执行，还是有其他问题?

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

所以问题是你只在父级上监听鼠标事件，这是你的.Container，但是当你快速移动鼠标向左或向右，这样它就会离开容器，你释放鼠标，鼠标事件在那里注册，而不是在.Container上。

解决这个问题的一种方法是监听整个页面的鼠标活动。

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

我已经修改了你的代码，这是预期的工作，检查它在这里Jsbin

相关文章：