时间戳

首页 > 解决方案 > 未在 chrome 中的禁用元素上引发 Mouseenter 事件

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

问题描述

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

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

这在 Firefox 上运行良好，但在 Chrome 上，mouseenter当按钮被禁用时不会引发事件。

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

有什么方法我仍然可以访问mouseenterChrome 上的活动？

标签： angulargoogle-chromefirefoxmouseenterdisabled-input

解决方案

这不是特定于角度的。它是内置的。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;
}

推荐阅读