¿Cómo usar un enlace para llamar a JavaScript?

166

¿Cómo usar un enlace para llamar al código JavaScript?

javascript Jin Yong
fuente

Respuestas:

192 
<a onclick="jsfunction()" href="#">

o 

<a onclick="jsfunction()" href="javascript:void(0);">

Editar:

La respuesta anterior no es realmente una buena solución, ya que aprendí mucho sobre JS desde que publiqué inicialmente. Consulte la respuesta de EndangeredMassa a continuación para conocer el mejor enfoque para resolver este problema.

Chelsea
fuente
11
Recomiendo el segundo, ya que el primero lo desplaza a la parte superior de la página.
Matt Grande
77
Sí, definitivamente lo hará, a menos que agregue un "return false;" Después de su función.
Chelsea
26
Este es el código de 1998. Use una de las soluciones discretas. Por favor.
Andrew Hedges
77
¡No uses ninguno! Los enlaces son para vincular, no son elementos ficticios para llamar a JavaScript.
I.devries
44
si va a poner JavaScript en línea, hágalo de esta manera: <a onclick="jsfunction;return false" href="linkasnormal">
Fire Crow
201

JavaScript discreto, sin dependencia de la biblioteca:

<html>
<head>
    <script type="text/javascript">

        // Wait for the page to load first
        window.onload = function() {

          //Get a reference to the link on the page
          // with an id of "mylink"
          var a = document.getElementById("mylink");

          //Set code to run when the link is clicked
          // by assigning a function to "onclick"
          a.onclick = function() {

            // Your code here...

            //If you don't want the link to actually 
            // redirect the browser to another page,
            // "google.com" in our example here, then
            // return false at the end of this block.
            // Note that this also prevents event bubbling,
            // which is probably what we want here, but won't 
            // always be the case.
            return false;
          }
        }
    </script>
</head>
<body>
    <a id="mylink" href="http://www.google.com">linky</a>        
</body>
</html>
Masa en peligro de extinción
fuente
26
¿Puede explicar por qué esto es mejor que la respuesta actualmente aceptada y dónde debe ir el script en la página (porque esta es claramente una pregunta de nivel principiante)?
Bill the Lizard
8
Cosa segura. Actualizado.
EndangeredMassa
66
Entonces, ¿qué debo incluir hrefsi no quiero redirigir al usuario y solo quiero ejecutar algún código? Editar: Veo que puede estar en blanco a la izquierda: href="".
SabreWolfy el
66
¿Por qué es mejor agregar el onclickevento a través de window.onload, en lugar de ponerlo onclickdirectamente en la <a>etiqueta?
Nathan Reed
10
¿Qué pasa si una de sus preocupaciones es que no desea separar su unidad funcional de trabajo en diferentes lugares físicos en su archivo fuente, o distribuirla en muchos archivos fuente? Si coloca una llamada de javascript en su etiqueta href, es dolorosamente claro al mirar en una línea lo que está sucediendo. Me preocuparía separar esa funcionalidad en diferentes lugares físicos donde es más difícil tener una idea de lo que está sucediendo. Tal vez ese es solo mi estilo.
stu
47 
<a href="javascript:alert('Hello!');">Clicky</a>

EDITAR, años después: ¡NO! ¡Nunca hagas esto! ¡Era joven y estúpido!

Editar, nuevamente: un par de personas han preguntado por qué no deberías hacer esto. Hay un par de razones:

  1. Presentación: HTML debe centrarse en la presentación. Poner JS en un HREF significa que su HTML ahora, más o menos, se trata de lógica empresarial.

  2. Seguridad: Javascript en su HTML como eso viola la Política de Seguridad de Contenido (CSP) . La Política de seguridad de contenido (CSP) es una capa adicional de seguridad que ayuda a detectar y mitigar ciertos tipos de ataques, incluidos los Cross-Site Scripting (XSS) y los ataques de inyección de datos. Estos ataques se utilizan para todo, desde robo de datos hasta desfiguración del sitio o distribución de malware. Lee más aquí .

  3. Accesibilidad: las etiquetas de anclaje son para vincular a otros documentos / páginas / recursos. Si su enlace no va a ninguna parte, debería ser un botón . Esto hace que sea mucho más fácil para los lectores de pantalla, terminales braille, etc. determinar lo que está sucediendo y brindar a los usuarios con discapacidad visual información útil.

Matt Grande
fuente
16
¿Quizás alguna descripción de los problemas con este método? ¿Es esto peor que href='#'y alert()en onclick?
Thomas Ahle
3
Soy nuevo en javascript y no entiendo qué hay de malo en esto ... Cualquier explicación sería buena
nilanjanaLodh
1
Hola, tampoco estoy seguro de por qué no usar esto. Estoy atrapado en un escenario donde necesito llamar a una función JS, pero todo lo que puedo especificar es un enlace. Y su solución funcionó.
skapie19
43

Y, ¿por qué no discreto con jQuery:

  $(function() {
    $("#unobtrusive").click(function(e) {
      e.preventDefault(); // if desired...
      // other methods to call...
    });
  });

HTML

<a id="unobtrusive" href="http://jquery.com">jquery</a>
Señor suerte
fuente
2
¿Funcionará para SEO de modo que los rastreadores encuentren el enlace y lo sigan?
Ahi Tuna
11
porque no todos usan jquery.
stu
1
@GregMiernicki Sí y no, según lo que quiera decir con enlace. Mira el HTML. Un webcrawler o cualquier cliente con JavaScript desactivado visitará el HREF dado. Los clientes con Javascript habilitado ejecutarán la acción de clic y LUEGO seguirán el enlace si esa función no devuelve un valor falso o llama a preventDefault. En este caso, el href es una alternativa, por eso se llama "discreto"
Evan Langlois
12

El JavaScript discreto tiene muchas ventajas, estos son los pasos que sigue y por qué es bueno usarlo.

  1. el enlace se carga normalmente:

    <a id="DaLink" href="http://host/toAnewPage.html"> haga clic aquí </a>

Esto es importante porque funcionará para los navegadores con JavaScript no habilitado, o si hay un error en el código de JavaScript que no funciona.

  1. JavaScript se ejecuta en la carga de la página:

     window.onload = function(){
        document.getElementById("DaLink").onclick = function(){
               if(funcitonToCall()){
                   // most important step in this whole process
                   return false;
               }
        }
 }

  2. si el javascript se ejecuta con éxito, tal vez cargando el contenido en la página actual con javascript, la devolución falsa cancela la activación del enlace. en otras palabras, poner return false tiene el efecto de deshabilitar el enlace si javascript se ejecutó correctamente. Si bien permite que se ejecute si JavaScript no lo hace, realiza una buena copia de seguridad para que su contenido se muestre de cualquier manera, para los motores de búsqueda y si su código se rompe, o se ve en un sistema que no sea JavaScript.

el mejor libro sobre el tema es "Dom Scription" de Jeremy Keith

Cuervo de fuego
fuente
9

O, si estás usando PrototypeJS

<script type="text/javascript>
  Event.observe( $('thelink'), 'click', function(event) {
      //do stuff

      Event.stop(event);
  }
</script>

<a href="#" id="thelink">This is the link</a>
Mark Biek
fuente
1
Me encanta no tener que poner las funciones de manejo de eventos en línea.
Mark Biek el
1
Es el único camino a seguir. Por favor vote las respuestas en línea. Es una práctica para la cual no hay excusa en estos días.
Andrew Hedges
55
@ Andrew: Por favor, deje un comentario junto con su voto negativo explicando por qué las respuestas en línea son malas.
Bill the Lizard
8

Creo que puedes usar el onclickevento, algo como esto:

<a onclick="jsFunction();">
David Z
fuente
0

basado en el uso de respuesta @mister_lucky con jquery:

$('#unobtrusive').on('click',function (e) {
    e.preventDefault(); //optional
    //some code
});

Código HTML:

<a id="unobtrusive" href="http://jquery.com">jquery</a>
Mostafa Asadi
fuente
-2

solo use javascript: ---- ejemplar

javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })
Domi S Herdian
fuente