Mouseenter 事件未在 chrome 中的禁用元素上引发

问题描述

我创建了一个 Angular 指令，它在满足特定条件时自动禁用按钮。 此外，如果用户将鼠标悬停在禁用的按钮上，则应显示一个小工具提示。 为了实现这一点，我使用了 Angular 的 @HostListener 指令：

  @HostListener("mouseenter")
  show() {
    this.tooltipService.showTooltip(this.tooltipRef,this.text);
    setTimeout(() => this.tooltipService.hidetooltip(this.tooltipRef),2000);
  }

这在 Firefox 上工作正常，但在 Chrome 上，当按钮被禁用时，mouseenter 事件不会被抛出。

我对这种不一致感到非常困惑，我找不到有关此问题的任何文档。

有什么办法可以继续访问 Chrome 上的 mouseenter 事件吗？

解决方法

这不是特定于角度的。它是内置的。 Firefox 和 Chrome 未就应如何处理此问题的规范达成一致。

禁用的表单控件必须防止在用户交互任务源上排队的任何点击事件在元素上分派。

似乎 Chrome 禁用了所有鼠标事件，而 Firefox 仅禁用了点击事件。

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls%3A-the-disabled-attribute

whatwg 有一个未解决的问题： https://github.com/whatwg/html/issues/2368

---

如果您希望 Firefox 不在禁用按钮上触发这些事件，您可以将其添加到您的 css 中

input[disabled],button[disabled] {
  pointer-events: none;
}