在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事件在释放按钮时触发）

我在其他页面尝试了这个事件，似乎这个问题是全局性的。我可以确认我的鼠标工作正常，因为我使用原生JavaScript尝试了这些事件。

- Alexander Ho

---

您可以使用pointerdown事件绑定。指针事件现在得到了很好的支持，这将为您融合鼠标和触摸交互。 - Sergey Rudenko

@SergeyRudenko，你能把那个变成一个答案，这样我就可以接受它了。 - Alexander Ho

好的 :) 希望有所帮助！ - Sergey Rudenko

Answer 1

尝试使用“指针事件”：

https://developer.mozilla.org/zh-CN/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)"
/>

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

- Sergey Rudenko

Answer 2

我意识到在Firefox触摸模拟中，鼠标按下事件无法正确触发。

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

- Alexander Ho