Cómo cancelar la navegación cuando el usuario hace clic en un enlace (elemento <a>)?

Question

Estoy intentando cargar algunas cosas usando AJAX cuando un usuario hace clic en un enlace, pero quiero que el enlace vaya realmente a algún lado para que la aplicación siga funcionando cuando javascript esté deshabilitado. ¿Hay alguna manera de hacer algo con javascript y cancelar la navegación cuando se hace clic en un enlace?

¿Cuál es la mejor práctica? ¿Se puede hacer eso, o necesito reemplazar el enlace usando javascript o qué?

Answer 1

Si usted tiene HTML así:

<a href="no_javascript.html" id="mylink">Do Something</a> 

Se podría hacer algo como esto con jQuery:

$(document).ready(function() { 
    $('#mylink').click(function() { 
     doSomethingCool(); 
     return false; // cancel the event 
    }); 
}); 

Todo lo que tiene que hacer es cancelar el evento, haga clic con el Javascript para evitar que el valor por defecto acción de pasar. Por lo tanto, cuando alguien hace clic en el enlace con Javascript habilitado, se llama al doSomethingCool(); y se cancela el evento click (por lo tanto, el return false;) y evita que el navegador vaya a la página especificada. Si tienen Javascript deshabilitado, sin embargo, los llevaría directamente al no_javascript.html.

Answer 2

¿por qué jQuery?

HTML:

<a href="no_javascript.html" onclick="return doSmth()">Link</a> 

... y código javascript:

function doSmth(){ 
    // your code here 
    return false 
} 

Answer 3

utilizo document.location.replace de navegar, pero cuando quiero cancelar la navegación, return false (en la misma función que document.location.replace) no cancela la navegación.

Answer 4

para IE al menos, simplemente ponga this.event.returnValue = false; al final del método.

por ejemplo:

function onClickFunction() 
{ 
    someMethod(); 
    this.event.returnValue = false; 
} 

que tenían un método complejo en el que este hizo el truco.

Answer 5

Nada de esto funcionó para mí con el navegador Google Chrome.

Esto es lo que hizo el trabajo, aunque (usando jQuery):

$(document).ready(function() { 
    $('#mylink').click(function(event) { 
     doSomethingCool(); 
     event.preventDefault(); // cancel the event 
    }); 
}); 

Answer 6

Lo que quiero hacer son:

a. para el atributo href, javascript:void(); se configurará

b. para el evento onclick, proporcionará una función para manejar el evento click y esa función devolverá false.

por ejemplo:

<script type="text/javascript"> 
    function myfunction() 
    { 
     //do something 
     return false; 
    } 
    </script> 

    <a href="javascript:void();" onclick="myfunction()">Link</a> 

Answer 7

<a href="http://www.google.com" class="ignore-click">Test</a> 

con jQuery:

<script> 
    $(".ignore-click").click(function(){ 
     return false; 
    }) 
</script> 

con JavaScript

<script> 
     for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) { 
      document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) { 
       event.preventDefault(); 
       return false; 
      }); 
     } 
</script> 

Se asigna la clase .ignore-click a tantos elementos que le gusta y hace clic en los elementos serán ignorados

Answer 8

es sencilla, el uso atributo rel = "nofollow"

<a href="signin.php" rel="nofollow">sign in</a> 

Answer 9

La mejor manera debe ser esto.

<a href="javascript:undefined"></a>