Question

我正在使用Cycle.js框架并创建了一个弹出/叠加作为组件。

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

组件是否有一个cycle.js-way方式来检测它之外的点击？或者我应该只是将听众附加到文档？

Answer 1

有两种方法可以实现这一目标：

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

创建自定义＆＃34;全局点击驱动程序＆＃34;它为整个文档添加了一个点击监听器，并将点击发布为一个可观察的：

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如何通过单击外部来关闭弹出窗口

1 个答案: