I`m building third party application for specific sites with Jquery.

Recently I started to use rx.Observable in my project. However, I found to use of this new JS library sometimes is hard to understand. I have tried to convert next peace of code to use with Observables, but it is not working at all;

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 variable is came from jquery.noConflict due to i am running not on my page. To convert second expression to Observable I have tried to use next statement:

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

But without success. How to convert above event statements to use with Observable and what is mon pattern to do this;

I`m building third party application for specific sites with Jquery.

Recently I started to use rx.Observable in my project. However, I found to use of this new JS library sometimes is hard to understand. I have tried to convert next peace of code to use with Observables, but it is not working at all;

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 variable is came from jquery.noConflict due to i am running not on my page. To convert second expression to Observable I have tried to use next statement:

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

But without success. How to convert above event statements to use with Observable and what is mon pattern to do this;

• javascript
• jquery
• rxjs
• observable

• What errors are you getting, if any ? – c69 Commented Mar 1, 2017 at 8:17
• No errors, just no logs on console – AlexBerd Commented Mar 1, 2017 at 8:28
• The this.observable irritates me a little, how exactly are you importing/accessing RxJS or in other words: where and how is this.observable being set? – Olaf Horstmann Commented Mar 1, 2017 at 8:48
• I update the code of the question. And as for the importing the rxjs it is simple script tag from cdnjs – AlexBerd Commented Mar 1, 2017 at 8:56
• Okay, that seems fine - it just looks very weired ;) – Olaf Horstmann Commented Mar 1, 2017 at 9:00

1 Answer 1

It seems as if jquery.trigger does not really work with custom events - you can only catch those events through $(elem).on as they are handles internally for browser-patibility-reasons. (https://github./jquery/jquery/issues/2476)

But you can relatively easy dispatch custom events (unless you want to target 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./jquery-2.2.4.js"></script>
<script src="https://unpkg./rxjs/bundles/Rx.min.js"></script>