Href = "#" No desplazarse

Question

Soy bastante nuevo en JS, así que me pregunto si sabe cómo resolver este problema.

actual que tengo en mi código

<a href='#' class="closeLink">close</a> 

que se ejecuta alguna JS para cerrar una caja. El problema que tengo es que cuando el usuario hace clic en el enlace, href = "#" lleva al usuario a la parte superior de la página cuando esto sucede.

¿Cómo resolver esto por lo que no hace esto? es decir, no puedo usar nada como onclick = "return false", ya que supongo que impedirá que el JS funcione.

Gracias

Answer 1

la forma habitual de hacer esto es para volver falsa de su controlador de clic Javascript. Esto evitará que el evento burbujee y cancela la acción normal del evento. Según mi experiencia, este es típicamente el comportamiento que deseas.

ejemplo jQuery:

$('.closeLink').click(function() { 
     ...do the close action... 
     return false; 
}); 

Si desea evitar simplemente la acción normal que puede, en cambio, sólo tiene que utilizar preventDefault.

$('.closeLink').click(function(e) { 
    e.preventDefault(); 
    ... do the close action... 
}); 

Answer 2

Si el código se está aprobó la eventObject podría utilizar preventDefault(); regresar falso también ayuda.

mylink.onclick = function(e){ 
e.preventDefault(); 
// stuff 
return false; 
} 

Answer 3

retorno falso es la respuesta, pero que suele hacer esto en su lugar:

$('.closeLink').click(function(event) { 
     event.preventDefault(); 
     ...do the close action... 
}); 

detiene la acción suceda antes de ejecutar su código.

Answer 4

Aunque parece ser muy popular, href = '#' no es una palabra clave mágica para JavaScript, es solo un enlace normal a un ancla vacía y, como tal, es bastante inútil. Es, básicamente, tiene dos opciones:

1. implementar una alternativa para los agentes de usuario JavaScript-inconscientes, utiliza el parámetro hrefpara apuntar a la misma y cancelar el vínculo con JavaScript. Por ejemplo:

   <a href="close.php" onclick="close(); return false">

2. Cuando el noscript alternativa no está disponible o relevante, no es necesario un vínculo en absoluto:

   <span onclick="close(); return false">Close</span>

Answer 5

Wrap una declaración div alrededor de un enlace, haga que el enlace devuelva falso, agregue la funcionalidad de javascript al div al hacer clic ...Versión

<div onClick="javascript:close();"> 
    <a href="#" onclick="javascript:return false;">Close</a> 
</div> 

Answer 6

JavaScript:

myButton.onclick=function(e){ 
    e.preventDefault(); 
    // code 
    return false; 
} 

versión de jQuery:

$('.myButtonClass').click(function(e){ 
    e.preventDefault(); 
    // code 
    return false; 
}); 

Esto acaba de hacer bien el trabajo! :)

Answer 7

La forma más sencilla de resolver este problema es simplemente añadir otro personaje después de que el símbolo de la libra de esta manera:

<a href='#a' class="closeLink">close</a> 

Problema resuelto. Sí, fue así de fácil. Algunos pueden odiar esta respuesta, pero no pueden negar que funciona.

Simplemente asegúrese de que no tenga una sección asignada a "a" o irá a esa parte de la página. (No veo esto tan a menudo como solía, sin embargo) "#" por sí solo, por defecto, va a la parte superior de la página.

Answer 8

Perdón por la respuesta tardía pero nadie mencionó esto. Simplemente hazlo <a>Do Stuff</a> sin ningún href y agrega el estilo cursor: pointer al elemento. A continuación, puede gestionar cualquier evento click con jQuery de la siguiente manera

$(document).ready(function(){ 
 
    $("#Element").click(function(){ 
 
    alert("Hello"); 
 
    //Do Stuff 
 
    }) 
 
});

#Element { 
 
    cursor: pointer; 
 
} 
 
#Element:hover { 
 
    color: #00f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<a id="Element">Do Stuff</a>

Answer 9

Una opción disponible para usted es no utilizar href = "#" pero en lugar href = "javascript:;" esto le permitirá ejecutar el manejador onclick mientras no desplazándose

Por ejemplo

<a href="javascript:;" onclick="doSomething()">Do Something</a>