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

【问题标题】：Mouseenter event not thrown on disabled elements in chrome未在 chrome 中的禁用元素上引发 Mouseenter 事件
【发布时间】：2021-05-19 18:03:39
【问题描述】：

我创建了一个 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 事件？

【问题讨论】：

这是预期行为。 stackoverflow.com/a/31132385/5539577
但是如果你确实想要一个解决方法 - 将按钮包装在一个 div 中并将工具提示移动到父组件
@SalminSkenderovic 知道为什么 Firefox 的行为与 Chrome 不同吗？

标签： angular google-chrome firefox mouseenter disabled-input

【解决方案1】：

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

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

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

【讨论】：