Mouseenter event not thrown on disabled elements in chrome

Question

I created an Angular directive which automatically disables a button if a certain condition is met. Additionally, a small tooltip should be shown if the user hovers the disabled button with the mouse. To implement this I used the @HostListener directive of Angular:

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

This works fine on Firefox but on Chrome the mouseenter event is not thrown when the button is disabled.

I am very confused by this inconsistency and I could not find any documentation of this problem.

Is there any way I can still get access to the mouseenter event on Chrome?

Answer 1

This is not angular-specific. It's built in. Firefox and Chrome do not agree on the specification for how this is supposed to be handled.

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.

Seems like Chrome disables all mouse events and Firefox only disables Click-events.

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

There is an open issue at whatwg for this: https://github.com/whatwg/html/issues/2368

---

If you want firefox not to fire these events on a disable button you can add this to your css

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