CODEWITHSUNDEEP
javascriptangularmouseevent
Ellie Wu
Ellie Wu

Reputation: 132

Angular MouseClick event

I'm having quite often the same issue as this discussion described.

I'm not able to reproduce the situation (since it usually happens in a complicated project), but the environment can be shorten as the code below:

<input id="input1" type="text" [(ngModel)]="value1" />
<button id="button1" type="button" (click)="onClick()">Button</button>

onClick() {
  console.log('click');
}

However, as the #input1 is focused, and I try to click #button1, it doesn't trigger the onClick() function until the second click.

I have found some other ways that sometimes help to fix this problem: such as using NgZone, or change (click) into (mousedown). However, I would like to know why this happen? Is there something I can keep in mind to avoid such situation during the development?

In the discussion, I've seen they're talking about that mouseup never been registered according to the view change, but I don't really understand it, so I recompose the question again, hope to know more about the problem. Thank you for the help.

Upvotes: 2

Views: 14092

Answers (1)

Chandrahasa Rai
Chandrahasa Rai

Reputation: 457

Try This one

<button (click)="myMouseClicked($event)">Mouse Click</button>

Than Your App component

 export class AppComponent {

      myMouseClicked(event) {
        console.log(event);
        alert("Mouse Clicked");
      }

    }

Upvotes: 5

Related Questions