javascript - JS、JQuery 和 Observable

Question

我正在使用 Jquery 为特定站点构建第三方应用程序。

最近我开始在我的项目中使用 rx.Observable。但是，我发现这个新的 JS 库的使用有时很难理解。我试图将下一段和平代码转换为与 Observables 一起使用，但它根本不起作用；

class EventsUtils {

    constructor() {       
        this.observable = Rx.Observable;      
    }
    bindUserLeavePageEvent() {
        var self = this;
        document.addEventListener('mouseleave', (e) => {
            $JQ(document).trigger('mouseleave.mo');
        }, false);
            /*We cannot remove document mouse over event thus we trigger Jquery registered custom event and on remove we cancel it*/
        $JQ(document).off('mouseleave.mo').on('mouseleave.mo', (e) => {
            if (e.clientY < 0 && !self.loaded) {
                console.log('loading from screen Leave');
                $JQ('.fixed-button').trigger('click');
                self.loaded = true;                
            }
        });
}

$JQ 变量来自 jquery.noConflict，因为我不在我的页面上运行。 要将第二个表达式转换为 Observable，我尝试使用下一条语句:

this.observable.fromEvent(document, 'mouseleave.mo').pluck('currentTarget').subscribe(x=>console.log(x));
}

但没有成功。如何将上述事件语句转换为与 Observable 一起使用以及执行此操作的常见模式是什么；

Answer 1

似乎 jquery.trigger 并不能真正处理自定义事件 - 您只能通过 $(elem).on 捕获这些事件，因为它们是内部句柄出于浏览器兼容性原因。 ( https://github.com/jquery/jquery/issues/2476 )

但是您可以相对轻松地发送自定义事件(除非您想要针对 IE<=8)

document.addEventListener("mouseleave", () => {
  console.log("Original event: Leave");
  
  // dispatching custom events with vanilla-js (should work all the way down to IE9)
  const event = document.createEvent("CustomEvent");
  event.initEvent("mo.leave", true, true);
  document.dispatchEvent(event);
});

Rx.Observable
  .fromEvent(document, "mo.leave")
  .pluck("currentTarget")
  .subscribe(target => console.info("Target is", target.nodeName));

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script>