[SOLUCIONADO] Evento click sin hacer click

melkart239 · #1 (**permalink**) 14/10/2016, 03:06

Saludos.
Estoy tratando de hacer un menú desplegable con submenús que se desplieguen cuando se hace click. Yo pensaba que la orden "onclick" era en caso de que el usuario haga click, pero el menú se despliega sin hacer click, directamente aparece al cargar la página.
El código html resumido es:

Código:

<head>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">window.onload=inicia;</script>
</head>
<body>
<nav id="elnav">
<button id="men1" class="btn" type="button">Menú 1 <span class="flecha"></span></button>
</nav>
<div id="submenus">
                <ul id="submenu1" class="lasul">
                    <li class="lasli"><a href="#">Submenú 1</a></li>
                    <li class="lasli"><a href="#">Submenú 2</a></li>
                    <li class="lasli"><a href="#">Submenú 3</a></li>
                </ul>
</div>
</body>

Y el script "script.js" (también resumido):

Código:

var estado1 = false;
function inicia(){
		elbut = document.getElementById(men1);
		elbut.style.cursor = 'all-scroll';
		elbut.onclick = mostrar();
}
function mostrar(){
	var elsubmen = document.getElementById(submenu1);
	if(estado1 == false){
		elsubmen.style.display = 'block';
		estado1 = true;
	}else{
		elsubmen.style.display = 'none';
		estado1 = false;
       }
}

El estilo (por si tuviera algo que var en mi problema) es:

Código:

.btn{
    width: 95px;
    height: 35px;
    background-color: #cc0066;
    border-radius: 0px;
    border: 0px solid;
    -moz-appearance: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    font-weight: bold;
    color: #fff;
    display: inline-block;
}
.flecha{
    width: 0;
    height: 0;
    border-top: 10px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    float: right;
    margin: 4px;
}
.lasul{
    position: fixed;
    margin: 0;
    padding: 0;
    display: none;
}

Mi construcción mental (dado los resultados es deconstrucción) es:
Cuando cargue la página inicia las cosas. Las cosas son: si el usuario hace click, enseña el submenú si vuelve a hacer click ocúltalo.
Pero el submenu aparece al cargar la página sin necesidad de hacer click.
He pensado que el elemento al ser un botón a lo mejor es autónomo. Lo he cambiado a <div> pero da igual.

mpozo · #2 (**permalink**) 14/10/2016, 03:28

Estás usando la manera antigua de registrar las escuchas de los eventos. La nueva manera es addEventListener()
https://developer.mozilla.org/es/doc...dEventListener

melkart239 · #3 (**permalink**) 14/10/2016, 03:42

También la he probado y pasa lo mismo.
Código html:

Código:

<head>
        <script type="text/javascript">window.addEventListener('load',inicia,false);</script>
</head>

Script:

Código:

function inicia(){
   var elbut = document.getElementById(men1);
   elbut.style.cursor = 'all-scroll';
   elbut.addEventListener('click', mostrar,false);
}
function mostar(){
	var elsubmen = document.getElementById(submenu1);
	if(estado1 == false){
		elsubmen.style.display = 'block';
		estado1 = true;
	}else{
		elsubmen.style.display = 'none';
		estado1 = false;
}

mpozo · #4 (**permalink**) 14/10/2016, 06:03

Cometes varios errores importantes en el javascript y otros tantos en el html. Los que ocupa en este caso son los de javascript

Invocas a la función mostrar pero la función se llama mostar
Para obtener los elementos, le pasas el argumento como si fuese un parámetro, cuando no es así. document.getElementById(men1), ha de ir entrecomillado document.getElementById('men1')

Hay alguna otra cosa que se podría puntualizar sobre el código javascript, pero no es lo mollar en la consulta

manuparquegiralda · #5 (**permalink**) 14/10/2016, 10:28

Solo un consejo, te ahorrarías muchos dolores de cabeza usando jQuery, para todo este tipo de cosas como hacer click en objetos y demás eventos es mucho más sencillo de hacer, te valdría con algo tan sencillo como esto:

Código HTML:

Ver original<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<nav id="elnav">
<button id="men1" class="btn" type="button">Menú 1 <span class="flecha"></span></button>
</nav>
<div id="submenus">
    <ul id="submenu1" class="lasul">
        <li class="lasli"><a href="#">Submenú 1</a></li>
        <li class="lasli"><a href="#">Submenú 2</a></li>
        <li class="lasli"><a href="#">Submenú 3</a></li>
    </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>

Código Javascript:

Ver original$(document).ready(function() {
    $("#men1").click(function() {
        var submen = $("#submenu1");
 
        if(submen.is(":hidden") {
            submen.slideDown("fast");
        } else {
            submen.slideUp("fast");
        }
    });
});

Con este sencillo código tendrías lo que quieres además con un efecto de persiana al abrir el submenú. No necesitarías ni el onload ni nada de eso y puedes darle efectos de animación para hacerla más dinámica de forma sencilla. Pero bueno es solo una opinión.

melkart239 · #6 (**permalink**) 14/10/2016, 13:18

Gracias a ambos por vuestro interés.
Los errores que apuntas son tipográficos, cuando escribí el código aquí en el foro. No puedo cambiarlos pues no tengo la opción de Editar el mensaje.
En cuanto a jQuery estoy en ello, pero no es el asunto en este momento.

Alexis88 · #7 (**permalink**) 14/10/2016, 15:13

El error está en que ejecutas el llamado a la función "mostrar" en lugar de asignarla como listener del evento:

Código Javascript:

Ver original//Así no
elbut.onclick = mostrar();
 
//Así debe ser
elbut.onclick = mostrar;

Y ya que no hay contenido multimedia de por medio, puedes disparar la ejecución de la función "inicia" al cargar el DOM:

Código Javascript:

Ver originaldocument.addEventListener("DOMContentLoaded", inicia, false);

melkart239 · #8 (**permalink**) 15/10/2016, 02:49

Gracias Alexis88. Ese era el error. La típica tontería de sintaxis. Ya he superado la fase en la que se me olvida algún ";" o escribía ":" en lugar de ";". Lo del paréntesis no me lo esperaba.