Realmente ao clicar em um elemento o evento mouseleave
é disparado. Seria isso um bug uma vez que o mouse não saiu do body? Ou o evento click
esteja disparando o evento? Fiz uma breve pesquisa e vi comentários de que isso seria mesmo um bug, enfim...
Para resolver isso fiz este código que cancela o evento mouseleave
ao clique e restaurando-o após um breve delay de dez milésimos de segundo (10ms). Esse delay é necessário porque se você restaurar o evento imediatamente ele será disparado de qualquer jeito.
Mas mudei o foco dos eventos ao document
em vez do body
, o que é mais interessante porque irá detectar o mouse saindo da área do documento em vez do body
, o que não é a mesma coisa. O body
da página é apenas onde a tag <body>
possui conteúdo, já o document
é a área toda da janela onde é exibida a página, independentemente se tem conteúdo ou não.
Comentei as linhas do if
para não exibir erro no snippet por causa
do localStorage. Ao copiar o código, descomente as linhas.
Veja:
jQuery(document).ready(function(){
var t = jQuery(this);
t.on("click", function(){
t.off("mouseleave");
setTimeout(function(){
t.on("mouseleave", function(){
console.log("saiu"); // apenas para ilustrar, pode remover esta linha
//if (!jQuery('body').hasClass('leave-on') && localStorage.getItem("leave") != "closed") {
// jQuery('body').addClass('leave-on');
//}
});
}, 10);
});
// disparo o evento para ativar o mouseleave
t.trigger("click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Ao clicar na div abaixo o evento mouseleave não é disparado e o console.log não será exibido:
<div style="width: 50px; height: 50px; background: red;">Clique aqui</div>