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

Question

我创建了一个 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 活动吗？

Answer 1

这不是 angular 特有的。它是内置的。 Firefox 和 Chrome 不同意应该如何处理的规范。

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

似乎 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;
}

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

Mouseenter event not thrown on disabled elements in chrome

angular

google-chrome

firefox

mouseenter

disabled-input