Почему моя подписка на mousedown срабатывает, если с момента моей подписки не произошло никаких новых событий mousedown?

Question

В моем приложении Angular есть функция, которая вызывается с помощью события вывода (mousedown) для кнопки Click Me . Функция содержит код, который подписывается на future mousedown events.

Однако, как ни странно, подписка срабатывает даже за до любого другого события mousedown.

Я создал Stackblitz для демонстрации (+ исходный код ), но вот код, вставленный здесь:

@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<MouseEvent>(document, "mousedown").subscribe(
      this.performActionOnTrigger.bind(this)
    );
  }

  performActionOnTrigger() {.                      <------ this function gets called despite
    console.log("Action [2] Performed!");                  only one mouse click !
    this.output += "\nAction [2] Performed!";
  }
}

Почему эта функция вызывается только после одного щелчка мыши ?

Answer 1

Как прокомментировал Teedeez, причина, по которой это происходит, из-за "пузырения" или распространения событий.

Событие мыши сначала вызывается на самом внутреннем элементе, вашей кнопке, но затем оно запускается на parent и его parent et c вплоть до окна.

Подробнее здесь:

https://www.sitepoint.com/event-bubbling-javascript/

Возможно, у вас есть переосмыслить прослушиватель событий, чтобы учесть это, или вы можете указать, чтобы он не распространялся.