Angular MouseClick event

Question

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.

Angular's click is one of the most basic example suggested by the official tutorials, I doubt there is any issue with zone.js here, there rather is something else not working in your code. Can you please provide a larger portion of it? out of the box, your example, should work as expected, unless onClick is private or protected in your component. — briosheje
– briosheje, Commented Sep 13, 2018 at 7:34

Chandrahasa Rai · Accepted Answer · 2018-09-13 07:22:40Z

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"); } }

Collectives™ on Stack Overflow

Angular MouseClick event

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related