在 angular 中同时触发 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 在按钮 relase 时触发）

我在其他页面试过这个事件，看来这个问题是全球性的。我可以确认我的鼠标工作正常，因为我尝试了 vanilla javascript

的事件

Answer 1

我发现在 Firefox 触摸模拟中，鼠标按下没有正确触发

参考：https://forum.ionicframework.com/t/mousedown-event-not-triggered-immediately/115887

Answer 2

尝试使用“指针事件”：

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

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

在 angular 中同时触发 mousedown 和 mouseup

Mousedown and mouseup fired at the same time in angular

javascript

angular

ionic4

mouseevent