firefoxで間違ったmouseenterイベント

Question

div要素内に入力があります。入力はデフォルトでは隠されており、マウスがコンテナ上にあるときに表示されるはずです。キーダウンイベントが発生すると、入力を非表示にする必要があります。明らかに、ユーザーは入力テキストを入力テキストにクリックする必要があります。

はここにある私の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では入力フィールドが消えず、望ましくない動作をします。

提案がありますか？

Answer 1

これはFirefoxのバグのようです。

私は方法を理解しました。 非常に簡単です。 display: noneの代わりにvisibility: hiddenを使用してください。 flicker.hide()などの代わりにflicker.addClass('hidden')を使用してください。

もう1つの方法は、flicker.hide()の後にmouseenterイベントをオフにし、150ms後に再度有効にすることです。しかし、setTimeoutのためにちょっと醜いようです。

The css example.

CSSのアプローチは、Firefox、クロム、サファリ、オペラではうまく動作します。 display: noneとvisibility: hiddenの間のdifferenceに注意してください。