Firefox 上的 mouseenter 事件错误答案

【问题标题】：Wrong mouseenter event on FirefoxFirefox 上的 mouseenter 事件错误
【发布时间】：2021-08-03 23:26:29
【问题描述】：

我在 div 元素中有一个输入。默认情况下输入是隐藏的，当鼠标悬停在容器上时应该是可见的。在任何keydown 事件中，输入应该被隐藏。显然，用户必须单击输入字段才能输入文本。

这是我的plnkr

 var container = $('#container');
 var flicker = $('#flicker').hide();
  var log = $('#log');
  container.on('mouseenter', function() {
    flicker.show();
    log.prepend('<div>mouseenter</div>');
  });
  flicker.on('keydown', function() {
    flicker.hide();
    setTimeout(function() {
      flicker.show();
    }, 4000);
  })

它在 Chrome 上完美运行，但在 Firefox (OS x) 上失败。在 Firefox 上，输入字段并没有消失，而且效果不佳。

有什么建议吗？

【问题讨论】：

输入如果没有焦点将不会收到任何按键事件。
@nnnnnn 显然用户必须点击输入字段
@nnnnnn 你看到 plnkr 了吗？
不。我无法从这里访问该网站。也许你可以edit你的问题直接包含runnable code snippet。
抱歉没有意义。为什么要使用flicker.on('keydown', function() {！！

标签： javascript jquery css firefox jquery-events

【解决方案1】：

这似乎是一个Firefox的错误。

我找到了方法。这很简单。只需使用visibility: hidden 而不是display: none。说使用flicker.addClass('hidden') 而不是flicker.hide() 或类似的东西。

另一种方法是在flicker.hide() 之后关闭 mouseenter 事件并在 150 毫秒后再次启用。但是因为setTimeout，看起来有点难看。

The css example.

css 方法在 firefox、chrome、safari、opera 中运行良好。但请注意display: none 和visibility: hidden 之间的difference。

【讨论】：