Cómo llamar a la función de JavaScript en lugar de href en HTML

86

Tengo una maqueta en HTML

<a href="javascript:ShowOld(2367,146986,2)"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

Recibí la respuesta del servidor cuando envié la solicitud.

Con esta maqueta obtuve como respuesta a una solicitud AJAX que envía mi código al servidor.

Bueno, todo está bien, pero cuando hago clic en el enlace, el navegador quiere abrir la función como enlace; lo que significa que después de hacer clic veo la barra de direcciones como

javascript:ShowOld(2367,146986,2)

significa que el navegador es URL si quiero hacer esto en Firebug, eso es trabajo. Ahora quiero hacer eso, cuando alguien hace clic en el enlace, el navegador intenta llamar a la función ya cargada en el DOM en lugar de intentar abrirlos en el navegador.

javascript html debugging

— Brett DeWoody
fuente

Una pregunta similar se responde en Stackoverflow. stackoverflow.com/questions/1070760/…

— Scaria Sebastian

192

Esa sintaxis debería funcionar bien, pero puede probar esta alternativa.

<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">

o

<a href="javascript:ShowOld(2367, 146986, 2);">

RESPUESTA ACTUALIZADA PARA LOS VALORES DE CADENA

Si está pasando cadenas, use comillas simples para los parámetros de su función

<a href="javascript:ShowOld('foo', 146986, 'bar');">

— Dutchie432
fuente

¿Cómo pasar una cadena escapando de las comillas dobles en los argumentos? H = El ejemplo solo tiene números enteros.

— jeffry copps

1

@jeffrycopps tratan comillas simples dentro de su función

— ineedme

@ineedme Respuesta actualizada con esa información. Gracias.

— Dutchie432

9

Si solo tiene como "controlador de eventos de clic", utilice un <button>. Un enlace tiene un significado semántico específico.

P.ej:

<button onclick="ShowOld(2367,146986,2)">
    <img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>

— Felix Kling
fuente

¿Hay alguna forma de hacer que un botón parezca un enlace en lugar de un botón?

— Ben Page

@Ben Page: Sí, con CSS. Al menos obtienes una buena aproximación. Vea mi respuesta y los comentarios aquí: stackoverflow.com/questions/4842953/or-javascriptvoid0/…

— Felix Kling

7

Intente hacer que su javascript sea discreto:

deberías usar un enlace real en el atributo href
y agregue un oyente en el evento de clic para manejar ajax

— soju
fuente

hrefes opcional, simplemente omítalo.

— Colin 't Hart

Una etiqueta es un ancla; no es necesario que tenga un enlace.

— Colin 't Hart

5

Utilizo un poco de CSS en un tramo para que se vea como un enlace así:

CSS:

.link {
    color:blue;
    text-decoration:underline;
    cursor:pointer;
}

HTML:

<span class="link" onclick="javascript:showWindow('url');">Click Me</span>

JAVASCRIPT:

function showWindow(url) {
    window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}

— tolsen64
fuente

El parámetro de función 'url' anterior me da la cadena "url" en lugar de la url real

— visrahane

Se supone que debes poner la URL real en la función showWindow. Por ejemplo: javascript: showWindow (' stackoverflow.com' );

— tolsen64

No puedo codificar eso ya que lo estoy creando usando dom y no tengo control sobre la URL

— visrahane

3

También debe separar el javascript del HTML.
HTML:

<a href="#" id="function-click"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

javascript:

myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);

Solo asegúrese de que la última línea de la función ShowOld sea:

return false;

ya que esto evitará que el enlace se abra en el navegador.

— la puerta del infierno
fuente

hrefes opcional, simplemente omítalo.

— Colin 't Hart

3

<a href="#" onclick="javascript:ShowOld(2367,146986,2)">

— nico
fuente

8

No es la mejor solución, ya que saltará a la parte superior de la página.

— Alex Marshall

Para href en lugar de #usarhref="javascript:void(0)

— Narayan

hrefes opcional, simplemente omítalo.

— Colin 't Hart

1

hrefes opcional para los aelementos.

Es completamente suficiente para usar

<a onclick="ShowOld(2367,146986,2)">link text</a>

— Colin 't Hart
fuente