Use o anti-shake para fazer o DIV desaparecer quando o mouse for movido
Como a tag div em si não suporta o evento onblur, para um div que aparece quando um botão é clicado, queremos fazê-lo desaparecer quando o div perder o foco e não puder ser alcançado usando onblur.
Mas você pode usar onmouseout e eventos para perceber a função de DIV perder o foco e desaparecer. Pode haver um problema ao usar onmouseout diretamente para realizar a remoção e o desaparecimento: se a posição do seu botão e a posição da div pop-up não forem coincidentes, o evento onmouseout será acionado imediatamente quando o mouse se mover, o que é inútil.
Use a combinação de anti-vibração, onmouseout e onmouseover para obter um evento desfocado com uma boa experiência
/** *O mouse se move sobre o evento div*/ function moveOverEvent(ele,outTimer) { let overTimer = null; return function(){ clearTimeout(outTimer); o último evento removido clearTimeout(overTimer); //Anti-shake overTimer = setTimeout(()=>{ ele.style.display = block; },500); O mouse sai*/ function moveOutEvent(ele,outTimer) { return function(){ clearTimeout(outTimer); //Anti-shake outTimer = setTimeout(()=>{ //Aguarde 500ms após sair e desapareça este div ele .estilo .display = nenhum },500);
Então descobri acidentalmente que o evento blur pode ser implementado adicionando o atributo tabindex ao div, então o código acima pode ter sido escrito em vão. (PS, sinto que a experiência acima será melhor e reduzirá muitos toques acidentais)
//Depois que tabindex for definido, o elemento adicionará uma linha pontilhada por padrão e a removerá através de ouline=0 (IE define hidefocus=true) <div tabindex=0 Outline=0 hidefocus=true></div>
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.