javascript - Mousedown 和 mouseup 同时以 Angular 触发

Question

我正在用 Angular (Ionic) 制作录音机
Controller 代码如下:

<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)"
/>

我认为您可以尝试的另一种方法是同时使用触摸和鼠标事件绑定(bind):

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

一些现代笔记本电脑同时具有鼠标和触摸输入功能，因此有时同时支持两者是有意义的。