javascript - RxJS 等待 2 个单独的点击事件

Question

我有一个按钮和一个图像。

当我单击按钮时，我希望它进入某种“等待模式”。等待两次单独的单击，它们都返回鼠标单击事件的 x、y 值。

我得到了鼠标 xy 部分没问题，但不知道接下来要使用什么 RxJS 运算符

const elem = document.getElementById("MyImage");
const root = fromEvent(elem, "click");
const xy = root.pipe(map(evt => xyCartoPos(elem, evt)));
xy.subscribe(coords => console.log("xy:", coords));

function xyCartoPos(elem, e) {
  const elemRect = elem.getBoundingClientRect();
  return {
    x: e.clientX - elemRect.x - elemRect.width / 2,
    y: flipNum(e.clientY - elemRect.y - elemRect.height / 2)
  };
}

标签： javascriptrxjsmouseeventdom-events

Answer 1

您可以使用scan将事件收集为数组，然后使用filter验证数组的长度为 2：

const xy = root.pipe(
  map(evt => xyCartoPos(elem, evt)),
  scan((acc, evt) => {
    acc.push(evt);
    return acc;
  }, []),
  filter(events => events.length == 2),
);

这将导致只有一个包含两个鼠标事件的数组，在两次点击后，被发布给订阅者。