Mousedown 和 mouseup 同时以角度触发

Question

我正在用 Angular (Ionic) 制作录音机

控制器代码如下：

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

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