未在Chrome中禁用元素上引发Mouseenter事件

西蒙

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

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

这在Firefox上可以正常工作,但在Chrome上,mouseenter禁用该按钮时不会引发事件。

我对这种不一致感到非常困惑,并且找不到有关此问题的任何文档。

我仍然可以通过任何方式mouseenter在Chrome上访问活动吗?

Salmin Skenderovic

这不是特定于角度的。它是内置的。Firefox和Chrome对此规范的处理方式未达成一致。

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

好像Chrome禁用了所有鼠标事件,而Firefox仅禁用了Click事件。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

绝对定位元素上的 Mouseenter 事件

来自分类Dev

Animationend事件未在:after元素上触发

来自分类Dev

如何在流星/ javascript中禁用禁用的html元素上的鼠标单击事件

来自分类常见问题

未在Chrome中触发Drop事件

来自分类Dev

全屏更改事件未在Chrome中触发

来自分类常见问题

vuejs列出禁用元素上的事件

来自分类Dev

在使用jQuery Mobile的iOS和Android中,单击事件未在标签的子元素上触发

来自分类Dev

如何在尚未在 DOM [no-jQuery] 中的元素上添加事件侦听器?

来自分类Dev

如何避免在jquery中的mouseenter事件上闪烁?

来自分类Dev

jQuery Tooltip事件未在动态创建的元素上触发

来自分类Dev

ng-click事件未在span元素上触发

来自分类Dev

滚动事件未在我的div元素上触发

来自分类Dev

jQuery change事件未在输入元素上触发

来自分类Dev

Mousemove事件未在页面元素或文档上触发

来自分类Dev

jQuery Tooltip事件未在动态创建的元素上触发

来自分类Dev

$ watch事件未在最初不可见的元素上触发

来自分类Dev

如何在禁用的元素上触发点击事件

来自分类Dev

有没有办法在Chrome中的“选择选项元素”上添加事件?

来自分类Dev

关于背景svg元素的mouseenter事件

来自分类Dev

拖动html元素时检测mouseenter事件

来自分类Dev

Mouseover / Mouseenter事件超出元素范围

来自分类Dev

在mouseenter上禁用了图像链接

来自分类Dev

在ListView中未触发的项目上引发保持事件

来自分类Dev

从 WPF 中的主窗口引发用户控件上的事件

来自分类Dev

在Chrome中禁用“角度提示:事件,模块,控制器”

来自分类Dev

在HTML中的多个元素上触发事件

来自分类Dev

未在类型上找到事件

来自分类Dev

如何禁用/重新启用html元素和子元素上的所有单击/触摸/鼠标事件

来自分类Dev

可拖动的切换复选框事件未在Chrome(JS / CSS)上触发

Related 相关文章

  1. 1

    绝对定位元素上的 Mouseenter 事件

  2. 2

    Animationend事件未在:after元素上触发

  3. 3

    如何在流星/ javascript中禁用禁用的html元素上的鼠标单击事件

  4. 4

    未在Chrome中触发Drop事件

  5. 5

    全屏更改事件未在Chrome中触发

  6. 6

    vuejs列出禁用元素上的事件

  7. 7

    在使用jQuery Mobile的iOS和Android中,单击事件未在标签的子元素上触发

  8. 8

    如何在尚未在 DOM [no-jQuery] 中的元素上添加事件侦听器?

  9. 9

    如何避免在jquery中的mouseenter事件上闪烁?

  10. 10

    jQuery Tooltip事件未在动态创建的元素上触发

  11. 11

    ng-click事件未在span元素上触发

  12. 12

    滚动事件未在我的div元素上触发

  13. 13

    jQuery change事件未在输入元素上触发

  14. 14

    Mousemove事件未在页面元素或文档上触发

  15. 15

    jQuery Tooltip事件未在动态创建的元素上触发

  16. 16

    $ watch事件未在最初不可见的元素上触发

  17. 17

    如何在禁用的元素上触发点击事件

  18. 18

    有没有办法在Chrome中的“选择选项元素”上添加事件?

  19. 19

    关于背景svg元素的mouseenter事件

  20. 20

    拖动html元素时检测mouseenter事件

  21. 21

    Mouseover / Mouseenter事件超出元素范围

  22. 22

    在mouseenter上禁用了图像链接

  23. 23

    在ListView中未触发的项目上引发保持事件

  24. 24

    从 WPF 中的主窗口引发用户控件上的事件

  25. 25

    在Chrome中禁用“角度提示:事件,模块,控制器”

  26. 26

    在HTML中的多个元素上触发事件

  27. 27

    未在类型上找到事件

  28. 28

    如何禁用/重新启用html元素和子元素上的所有单击/触摸/鼠标事件

  29. 29

    可拖动的切换复选框事件未在Chrome(JS / CSS)上触发

热门标签

归档