0

では、 GitHub の RxJSからの次の例では、マウス移動オブザーバブルが「アクティブ化」されるのはいつですか?つまり、マウス移動イベントのサンプリングを開始するトリガーは何ですか?

サブスクライブは、mousedrag のすべてのオブザーバブルのシーケンスの開始をマークすると思っていましたが、そうではないようです。明らかに、mousedown の前に mousemove イベントがありますが、これらのイベントは使用されません。

var dragTarget = document.getElementById('dragTarget');

// Get the three major events
var mouseup   = Rx.Observable.fromEvent(dragTarget, 'mouseup');
var mousemove = Rx.Observable.fromEvent(document,   'mousemove');
var mousedown = Rx.Observable.fromEvent(dragTarget, 'mousedown');

var mousedrag = mousedown.flatMap(function (md) {
    // calculate offsets when mouse down
    var startX = md.offsetX, startY = md.offsetY;

    // Calculate delta with mousemove until mouseup
    return mousemove.map(function (mm) {
        mm.preventDefault();

        return {
            left: mm.clientX - startX,
            top: mm.clientY - startY
        };
    }).takeUntil(mouseup);
});

// Update position
var subscription = mousedrag.subscribe(function (pos) {          
    dragTarget.style.top = pos.top + 'px';
    dragTarget.style.left = pos.left + 'px';
});

任意の洞察をいただければ幸いです。

4

1 に答える 1