title: Why is my mousedown subscription getting triggered when no new mousedown events have happened since my subscription was set?
body: <p>In my Angular app, I have a function that gets called by the <code>(mousedown)</code> output event on a <kbd>Click Me</kbd> button. The function contains code that subscribes to <strong>future</strong> <code>mousedown</code> events.</p>
  
  <p>However, strangely, the subscription is firing even <strong>before</strong> any other mousedown event happens.</p>
  
  <p>I've created a <a href="https://rxjs-mousedown2.stackblitz.io/" rel="nofollow noreferrer">Stackblitz to demonstrate</a> (+ <a href="https://stackblitz.com/edit/rxjs-mousedown" rel="nofollow noreferrer">source code</a>), but here is the code pasted here:</p>
  
  <pre><code>@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
  })
  export class AppComponent {
    name = "Angular";
    output = '';
  
    performActionOnClick() {
      console.log("Action [1] Performed!");
      this.output += "\nAction [1] Performed!";
  
      fromEvent&lt;MouseEvent&gt;(document, "mousedown").subscribe(
        this.performActionOnTrigger.bind(this)
      );
    }
  
    performActionOnTrigger() {.                      &lt;------ this function gets called despite
      console.log("Action [2] Performed!");                  only one mouse click !
      this.output += "\nAction [2] Performed!";
    }
  }
  </code></pre>
  
  <p><strong>Why is this function getting called after only a single mouse click</strong> ?</p>