Cycle.js如何通过点击弹出窗口的外部来关闭它

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

本文关键字：外部 窗口 js 何通过 Cycle      更新时间：2023-09-26

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

我已经隔离了弹出组件。消息来源。我通常用作事件源的DOM仅限于弹出式DOM。

组件是否有检测外部点击的cycle.js-way？还是应该将侦听器附加到文档？

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

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

  2. 创建一个自定义的"全局点击驱动程序"，在整个文档中添加一个点击监听器，并将点击发布为可观察的：

    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);
相关文章：