Mousedown and mouseup fired at the same time in angular

Question

I am making a voice recorder in Angular (Ionic)

The controller code is as follows:

<img
      src="assets/imgs/voice-message-btn.svg"
      alt="Voice message"
      *ngIf="textMessage.length==0"
      (mousedown)="onStartRecording($event)"
/>

But the mousedown event (a console log) is only fired when the mouse button is released.

If I do the following

<img
      src="assets/imgs/voice-message-btn.svg"
      alt="Voice message"
      *ngIf="textMessage.length==0"
      (mousedown)="onStartRecording($event)"
      (mouseup)="onStopRecording($event)"
/>

then the mousedown event and mouseup event are fired together at mouse release.

May anyone please tell why the mouse events are not firing correctly? (mousedown fired at button press and mouseup fired at button relase)

I tried the event in other pages and seems this problem is global. I can confirm my mouse is working properly because I tried the events with vanilla javascript

Answer 1

Try using "Pointer Events":

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events

Their support is now pretty good across all modern browsers and they do blend mouse and touch input nicely.

So you could do:

<img
      src="assets/imgs/voice-message-btn.svg"
      alt="Voice message"
      *ngIf="textMessage.length==0"
      (pointerdown)="onStartRecording($event)"
/>

Another way I think you could try is to use both touch and mouse event bindings:

<img
      src="assets/imgs/voice-message-btn.svg"
      alt="Voice message"
      *ngIf="textMessage.length==0"
      (mousedown)="onStartRecording($event)"                                         
      (touchstart)="onStartRecording($event)"
/>

Some modern laptops feature both mouse and touch input so sometimes it makes sense to support both simultaniously.