Cycle.js 如何通过在弹出窗口外单击来关闭弹出窗口

Question

我正在使用 Cycle.js 框架并创建了一个 popup/overlay 作为组件。

我已经隔离了弹出组件。我通常用作事件源的 sources.DOM 仅限于弹出窗口 dom。

是否有 cycle.js 组件检测外部点击的方法？或者我应该只求助于将侦听器附加到文档？

Answer 1

有两种方法可以实现：

将 div 元素放入独立的数据流组件中，但通过 css position:fixed; left:0;right:0;top:0;bottom:0; 定位它，使其跨越整个页面。然后为此 div 添加侦听器。它会获取页面上的所有点击事件，并且仍在您的组件的隔离边界内。

创建自定义 "global click driver" 以将点击侦听器添加到整个文档并将点击发布为可观察对象：

const globalClickDriver = () => {
  return O.fromEventPattern(
    (h) => {
      document.addEventListener('click', h, true);
    },
    (h) => {
      document.removeEventListener('click', h, true);
    }
  );
};

const drivers = {
  DOM: makeDOMDriver('#app-main'),
  globalClick: globalClickDriver,
};

Cycle.run(main, drivers);

Cycle.js 如何通过在弹出窗口外单击来关闭弹出窗口

Cycle.js how to close a popup by clicking outside it

javascript

cyclejs