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

Dichroite

you can use pointerdown event binding. Pointer events are now well supported and that will blend both mouse and touch interactions for you. – Herbage

@SergeyRudenko could you turn that into an answer so that I could accept it – Dichroite

ok:) hope it helped! – Herbage

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.

Herbage

Answer 2

I realized that in Firefox touch simulation, mouse down is not fired properly

Reference: https://forum.ionicframework.com/t/mousedown-event-not-triggered-immediately/115887

Dichroite