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

Question

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

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

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

Answer 1

有两种方法可以实现：

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);