Eu gostaria de atrasar um evento de foco em jquery. Estou lendo um arquivo quando o usuário passa o mouse sobre um link ou rótulo. Não quero que esse evento ocorra imediatamente, caso o usuário esteja apenas movendo o mouse pela tela. Existe uma maneira de atrasar o disparo do evento?
Obrigado.
Código de exemplo:
$(function() {
$('#container a').hover(function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx',
{filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
},
function() { $('#info').remove(); }
});
});
ATUALIZAÇÃO: (14/01/09) Após adicionar o plugin HoverIntent, o código acima foi alterado para o seguinte para implementá-lo. Muito simples de implementar.
$(function() {
hiConfig = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
timeout: 200, // number = milliseconds delay before onMouseOut
over: function() {
$('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
function() {
$(this).appendTo('#info');
}
);
}, // function = onMouseOver callback (REQUIRED)
out: function() { $('#info').remove(); } // function = onMouseOut callback (REQUIRED)
}
$('#container a').hoverIntent(hiConfig)
}
jquery
events
mouseevent
settimeout
Brettski
fonte
fonte
Respostas:
Use o plugin hoverIntent para jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html
É absolutamente perfeito para o que você descreve e eu o usei em quase todos os projetos que exigiam a ativação do mouse sobre os menus, etc ...
Há uma pegadinha nessa abordagem, algumas interfaces são desprovidas de um estado de 'pairar', por exemplo. navegadores móveis como o safari no iphone. Você pode estar escondendo uma parte importante da interface ou navegação sem nenhuma maneira de abri-la em tal dispositivo. Você pode contornar isso com CSS específico do dispositivo.
fonte
Você precisa verificar um cronômetro ao pairar. Se ele não existir (ou seja, este é o primeiro foco), crie-o. Se ele existir (ou seja, este não é o primeiro foco), elimine-o e reinicie-o. Defina a carga útil do cronômetro para o seu código.
Aposto que jQuery tem uma função que encerra tudo isso para você.
Edit : Ah sim, plugin jQuery para o resgate
fonte
Concordo totalmente que o hoverIntent é a melhor solução, mas se você for um infeliz que trabalha em um site com um processo longo e demorado de aprovação de plug-ins jQuery, aqui está uma solução rápida e suja que funcionou bem para mim:
Este é apenas para expandir um <li> se o mouse estiver nele por mais de 300 ms.
fonte
Você poderia usar uma chamada setTimeout () com um clearTimeout () no evento mouseout.
fonte
Em 2016, a solução da Crescent Fresh não funcionou conforme o esperado para mim, então eu descobri o seguinte:
fonte
Minha solução é fácil. Atrasar o menu aberto se o usuário mantiver o mouseenter em obj acima de 300 ms:
fonte