Angular 未在chrome中禁用的元素上引发Mouseenter事件
我创建了一个角度指令,如果满足某个条件,它会自动禁用按钮。 此外,如果用户将鼠标悬停在禁用按钮上,则应显示一个小的工具提示。 为了实现这一点,我使用了Angular的Angular 未在chrome中禁用的元素上引发Mouseenter事件,angular,google-chrome,firefox,mouseenter,disabled-input,Angular,Google Chrome,Firefox,Mouseenter,Disabled Input,我创建了一个角度指令,如果满足某个条件,它会自动禁用按钮。 此外,如果用户将鼠标悬停在禁用按钮上,则应显示一个小的工具提示。 为了实现这一点,我使用了Angular的@HostListener指令: @HostListener("mouseenter") show() { this.tooltipService.showTooltip(this.tooltipRef, this.text); setTimeout(() => this.toolt
@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只禁用了点击事件
whatwg对此有一个公开问题:
如果您希望firefox不在禁用按钮上触发这些事件,您可以将其添加到css中
input[disabled],
button[disabled] {
pointer-events: none;
}
这是预期的行为。但是如果您确实需要解决方法,请将按钮包装在div中,并将工具提示移动到父级component@SalminSkenderovic你知道为什么Firefox和Chrome的表现不同吗?