手ぶれ補正を使用して、マウスを外したときに DIV が消えるようにします。
div タグ自体は onblur イベントをサポートしていないため、ボタンをクリックするとポップアップする div の場合、div がフォーカスを失ったときに非表示にしたいのですが、onblur を使用してそれを実現することはできません。
ただし、onmouseout と events を使用すると、DIV がフォーカスを失って消える機能を実現できます。 onmouseout を直接使用して削除と消滅を実現する場合には問題が発生する可能性があります。ボタンの位置とポップアップ div の位置が一致しない場合、マウスが移動するとすぐに onmouseout イベントがトリガーされ、役に立ちません。
手ぶれ補正、onmouseout、onmouseover を組み合わせて使用し、良好なエクスペリエンスでぼかしイベントを実現します
/** *マウスが div イベント上に移動する*/ function moveOverEvent(ele,outTimer) { let overTimer = null; return function(){ clearTimeout(outTimer); // div が消えない場合は、div を移動して消去します。最後に削除されたイベント clearTimeout(overTimer); //アンチシェイク overTimer = setTimeout(()=>{ ele.style.display = block; } } /** *マウスが移動します*/ function moveOutEvent(ele,outTimer) { return function(){ clearTimeout(outTimer) //アンチシェイク outTimer = setTimeout(()=>{ //移動後 500ms 待ってから、この div ele を非表示にします.style .display = なし },500);そこで偶然、divにtabindex属性を追加することでblurイベントが実装できることを発見したので、上記のコードは無駄に書いてしまったのかもしれません。 (追記：上記のエクスペリエンスはより良くなり、誤ってタッチすることが少なくなると思います)
// tabindex が設定されると、要素はデフォルトで点線を追加し、ouline=0 によって点線を削除します (IE は Hidefocus=true を設定します) <div tabindex=0 summary=0 hidefocus=true></div>
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。