estoy haciendo un código en el cual hay un título que pasa de 50 px a 30px (SET INTERVAL) y para detener este intervalo hay un botón "STOP" que lo detiene al hacer click (clear interval). Eso funciona pero también noto que al hacer click en CUALQUIER PARTE DE LA PÁGINA el intervalo se detiene, cuando esa función le corresponde al botón "STOP" unicamente. ¿Por qué pasaría esto? No logro darme cuenta.
Espero haberme explicado bien. Muchas Gracias por tu tiempo :)
'use strict'
window.addEventListener('load', () => {
// TIMERS ****
var tiempo = setInterval(function(){
console.log("Set interval ejecutado");
var encabezado = document.querySelector("h1");
if(encabezado.style.fontSize == "50px"){
encabezado.style.fontSize = "30px";
}else{
encabezado.style.fontSize = "50px";
}
}, 1000);
var stop = document.addEventListener("click", function(){
alert("Has parado el intervalo en bucle");
clearInterval(tiempo);
});
var stop = document.querySelector("#stop");
});
<head>
<script src="js/31-timers.js"></script>
</head>
<body>
<h1>Curso Javascript victorroblesweb.es</h1>
<p>Nuestro primer script en JS</p>
<p>
<button id="stop">Stop</button>
<button id="boton">Presioname</button>
<form>
<input type="text" name="nombre" id="campo_nombre"/>
</form>
</p>