Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Maira Torresani

onmouseout não funciona em determinada página

Por , em Javascript

Recommended Posts

Maira Torresani    0

Maira Torresani
Postado

Estou fazendo um popup que abre quando o usuário vai sair da página, para isso usei o evento onmouseout="" na tag body.

 

Na minha página teste funciona perfeitamente, o código dela está abaixo.

 

Porém, quando coloco o mesmo código na página teste do cliente, o onmouseout não funciona corretamente. Ele está executando a função ao mover o mouse dentro da página e não para fora como deveria ser. Penso que talvez tenha algum conflito na página ou algo assim, mas não achei o erro. A página é essa: https://www.enlevolar.com.br/home-teste-popup

 

E o código é esse, que funciona na página teste mas fica bugado na página do cliente:

<!DOCTYPE html>
<html>
	<head>
                    <meta charset="utf-8">
		<script>
			function abrepopup() {
                            if ((!window.localStorage.getItem("popup-exibida"))&&(!window.sessionStorage.getItem("popup-session")))
                                            {
                                    document.getElementById("popup").style.display="block";
                                                    document.getElementsByTagName("body")[0].removeAttribute("onmouseout");
                                window.sessionStorage.setItem("popup-session", "1");
                                            }
                                    };

                                    function fechapopup() {
                                            document.getElementById("popup").style.display="none";
                            document.getElementsByTagName("body")[0].removeAttribute("style");
                                    };

                                    function troca2() { 
                                            document.getElementById("caixa-popup1").style.display="none"; 
                                            document.getElementById("caixa-popup2").style.display="block"; 
                                    };

                        var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
                        function setCodigoLinha(linha) { 
                                            if(linha == 1)
                            {
                                    document.getElementById("codigo-desconto-popup").value="1primeiraCompra";
                                document.getElementById("link-linha-popup").href="/produto/listar/Cama";
                                document.getElementById("img-linha-popup").src="//d8vlg9z1oftyc.cloudfront.net/garmisch/image/media/COBRE%20LEITO%20REQUINTE%20COR%201_56154fbf778be.jpg";
                                    document.getElementById("nome-linha-popup").value="Linha Cama";
                            }
                            else if(linha == 2)
                            {
                                    document.getElementById("codigo-desconto-popup").value="2primeiraCompra"; 
                                document.getElementById("link-linha-popup").href="/produto/listar/Banho";
                                document.getElementById("img-linha-popup").src="//d8vlg9z1oftyc.cloudfront.net/garmisch/image/media/Valencia_DAN0241_5615502a74c18.jpg";
                                    document.getElementById("nome-linha-popup").value="Linha Banho";
                            }
                            if(!filter.test(document.getElementById("email-desconto-popup").value))
                            {
                                    document.getElementById("escolha-a-linha-erro").innerHTML="Insira um e-mail válido para ganhar o desconto!";
                            }
                            else
                            {
                                                    document.getElementById("caixa-popup2").style.display="none"; 
                                                    document.getElementById("caixa-popup3").style.display="block"; 
                                /*window.localStorage.setItem("popup-exibida", "1");*/
                            }
                                    };
		</script>
                <style>
                    #popup{background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; position: fixed; z-index: 10000; overflow: auto;}
                    .caixa-popup{background-color: #fff; width: 700px; height: auto; margin-top: 10% !important; margin: auto; text-align: center; padding: 3%;}
                    @media(max-width: 700px){
                        .caixa-popup{width: 100%;}
                    }
                    .caixa-popup .titulo{padding-bottom: 4%; border-bottom: 1px solid rgba(0,0,0,0.3); display: block; margin-bottom: 4%;}
                    .caixa-popup #fechapop{float: right; z-index: 1; cursor:pointer;}
                    .caixa-popup h1, .caixa-popup p{margin: 2% 7%;}
                    .caixa-popup input[type="button"]{width: 30%; margin:5% 5% 2% 5%; background: #722b2b; color:#fff; padding: 3% 0;}
                    .caixa-popup input[type="button"]:hover, {opacity: 0.95;}
                    .caixa-popup .button-semdestaque{background: #fff !important; color: #595959 !important;}
                    .caixa-popup .p-option{width: 30%; text-align: center; display:inline;}
                    .caixa-popup .newsletter input[type="radio"]{display: inline; height: auto; width: auto; padding: 1%; -webkit-appearance: radio; min-height: auto; margin: 2% 1%;}
                                .caixa-popup .quero-meu-desconto{position: relative; width: 40%; margin: 2%; background: #722b2b; color:#fff; padding: 3% 1%;}
                        .caixa-popup #img-linha-popup, .caixa-popup #nome-linha-popup{width: 50%; margin: 0 auto; border: 1px solid #722b2b; background-color: #fff; color: #722b2b; font-size: 1.3em;}
                                .caixa-popup #email-desconto-popup{width: 85%;}
                    .caixa-popup #codigo-desconto-popup{max-width: 100%; background: #722b2b; text-align: center; border: none;margin-top: 2%; color: #fff; cursor:text;}
                                @media(max-width: 500px){
                        .caixa-popup .p-option{margin: 2% 5%; display: inline-block;}
                    }
                </style>
	</head>
	<body onmouseout="abrepopup()" style="height: 1000px;">
        <div id="container">
            <div id="popup" style="display: none;">
                
                <div id="caixa-popup1" class="caixa-popup" style="display: block;">
                    <div id="fechapop" onclick="fechapopup()">X</div>
                    <h3 class="titulo">Você quer</h3>
                    <h1 class="titulo"> GANHAR <strong>R$10</strong> DE DESCONTO<br><span>em sua primeira compra?</span></h1>
                        <input type="button" value="SIM" onclick="troca2()" style="font-size: 1.6em;">
                        <input type="button" class="button-semdestaque" value="NÃO" onclick="fechapopup()"><br>
                        <p class="p-option">Quero ganhar o desconto!</p> <p class="p-option">Não gosto de descontos.</p>
                </div>
                
                <div id="caixa-popup2" class="caixa-popup" style="display: none;">
                    <div id="fechapop" onclick="fechapopup()">X</div>
                    	<h3 class="titulo">Informe seu e-mail e</h3>
                       <h1>ESCOLHA UMA LINHA PARA GANHAR O DESCONTO</h1>
                        <p class="titulo">Além de ganhar um desconto exclusivo, você ainda vai receber todas as nossas novidades e promoções em seu e-mail!</p>
                        <div class="newsletter relative color_default button_in_input">
                            <input id="email-desconto-popup" type="email" placeholder="Seu e-mail" class="flexy-newsletter-email w_full fs_medium fw_light error form-control" required="">
                            <div class="message_container_subscribe d_none m_top_20"></div>
                            <button class="flexy-newsletter-sigin quero-meu-desconto" onclick="setCodigoLinha(1)">Quero Desconto na Linha Cama</button>
                            <button class="flexy-newsletter-sigin quero-meu-desconto" onclick="setCodigoLinha(2)">Quero Desconto na Linha Banho</button>
                        </div>
                        <p id="escolha-a-linha-erro" style="color: #722b2b;"></p>
                </div>
                
                <div id="caixa-popup3" class="caixa-popup" style="display: none;">
                    <div id="fechapop" onclick="fechapopup()">X</div>
                    <h1>
                        <span>Seu código de desconto é<br>
                        <input type="text" id="codigo-desconto-popup" name="codigodesc" value="codigodesc" disabled="disable"></span>
                    </h1>
                     <p class="titulo">Insira este código no checkout para ganhar o desconto!</p>
                     	<h2 style="margin: 2%;">Clique para Comprar Agora:</h2>
                        <a id="link-linha-popup" href=""><img id="img-linha-popup" src=""><br><input type="button" id="nome-linha-popup" value=""></a>
                        <p onclick="fechapopup()" style="color: #722b2b; cursor: pointer; margin-top: 5%;">ou<br>Continue no site</p>
                </div>
                
            </div>
        </div>
            
            <div style="height: 200%; background: red;"></div>
    </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Use o evento onmouseleave no lugar de onmouseout. O onmouseout é disparado várias vezes mesmo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • dragonout
      Efeito Rolamento Imagem
      Por dragonout
      olá , gostaria de fazer um efeito que quando passa o mouse por cima da imagem troque por outra , porém esta parte já sei , agora gostaria de saber como faço , para ela fazer um efeito de rolamento mais lento e vindo da esquerda cobrindo a imagem , alguém pode me ajudar ?
    • ingridmendes1
      Menu
      Por ingridmendes1
      Oi gente, tudo bem?
      Eu estou desenvolvendo um site e tô com um problema no menu que não consigo resolver. Na verdade quero modificar uma coisa e não consigo. Tô usando o código
      <label for='tm'> <img src="icones/menu_on.png"
      onMouseOver="this.src='icones/menu_off.png'"
      onMouseOut="this.src='icones/menu_on.png'"
      width="61" height="40"/>
      </label>
       
      Só que o problema é que eu queria que, no momento em que o menu estivesse aberto, o ícone fosse de um X e não o mesmo do início.
      O que devo fazer?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito