Mousedown и mouseup запускаются одновременно в angular

Question

Я делаю диктофон в Angular (Ioni c)

Код контроллера следующий:

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

Но событие mousedown (журнал консоли) срабатывает только при отпускании кнопки мыши.

Если я сделаю следующее

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

, тогда событие mousedown и событие mouseup запускаются вместе при отпускании мыши.

Кто-нибудь может сказать, почему события мыши не срабатывают правильно? (mousedown запускается при нажатии кнопки, а mouseup запускается при отпускании кнопки)

Я пробовал событие на других страницах и, похоже, эта проблема является глобальной. Я могу подтвердить, что моя мышь работает правильно, потому что я пробовал события с vanilla javascript

Answer 1

Попробуйте использовать «События указателя»:

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

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

Итак, вы могли бы сделать:

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

Я думаю, вы могли бы попробовать еще один способ - использовать привязки событий касания и мыши:

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

Некоторые современные ноутбуки имеют как мышь, так и сенсорный ввод, поэтому иногда имеет смысл поддерживать и то, и другое одновременно.

Answer 2

Я понял, что в Firefox симуляции касания мышь не запускается должным образом

Ссылка: https://forum.ionicframework.com/t/mousedown-event-not-triggered-immediately/115887