2010-06-05 12 views
5

¿Qué significa el siguiente código -protocolo y eventos Javascript

<a href="javacsript:;" onClick="addItem(160)">some link</a> 

Mi duda básica es la que se ejecuta el script cuando se hace clic en el enlace

Respuesta

3

El onclick se ejecutará primero. Si onclick no devuelve false (en este caso no), entonces se procesará href.

+0

y a qué script se llamará cuando se procesa el href? – ayush

+0

En su ejemplo, se procesará el JavaScript en línea ('javascript:;'). Si href era una URL regular, el navegador simplemente navegaría hacia ella. – Matt

+0

Nada. Es probable que el autor piense que esta es una buena manera de evitar que el presentador acceda a otra página si el onclick no devuelve falso. También verá javascript: void() mucho. En realidad, es mejor asegurarse de que el evento onclick devuelva false y, si no lo hace, asegúrese de que href empuje a algún tipo de respaldo. O bien, no use la etiqueta de anclaje en absoluto. – Andrew

0

tu duda es cierto, hay que encontrar la "función addItem (x)" en un archivo JavaScript que unía por etiqueta script de la página (por lo general en etiqueta de la cabeza)

+0

la función addItem está en uno de los archivos de script. mi duda es que ¿qué pasaría si addItem devuelve falso? – ayush

0

El "javascript:"!. Interior href es una forma de decirle al navegador que ejecute javascript en lugar de ir a una página diferente.

Esta línea, por ejemplo, mostrará un cuadro de mensaje con un mensaje de "prueba".

<a href="javascript:alert('testing');">Click me</a> 

y éste se ejecute una sentencia de JavaScript vacío que no hará nada

<a href="javacsript:;">Click me</a> 

El onclick es un evento que también se activa cuando se hace clic en un enlace. A diferencia de href, no le permite poner un enlace a una página diferente; solo acepta javascript.

Los navegadores activarán primero el evento onclick y luego procesarán el atributo href. Si se trata de una URL (href vacío significa URL actual, haga clic en actualizará la página), la seguirá, si es javascript lo ejecutará.

Poniendo "javascript :;" o "javascript: void (null);" dentro de href es antiguo y técnica incorrecta para garantizar que el navegador no actualice la página después de que se haya procesado onclick.

Para responder a su pregunta; ambos scripts se ejecutarán, pero el script href no hará nada.

+0

¡No tan simple como eso, @Luc !! ¡Vea lo que sucede si el script realmente devuelve un valor! – Pointy

2

La parte javascript en el atributo href es el protocolo (ya sabes, como http, ftp o mailto). Lo que hace es decirle al navegador que la URL es realmente código JavaScript.

Normalmente, cuando hace clic en un enlace, el navegador ejecutará lo que encuentre en el atributo href. Sin embargo, el navegador también desencadenará el evento onclickantes de maneja la cosa href. Por lo tanto, configurar un controlador onclick anulará el comportamiento normal.

Por lo tanto, el controlador de eventos se convierte en rey y tiene la posibilidad de permitir o evitar el comportamiento predeterminado del navegador al devolver true (permitir) o false (evitar).

Por lo tanto, en su ejemplo, cuando hace clic en ese enlace, el navegador activará addItem. Si devuelve false, no pasa nada. Si devuelve true, el navegador ejecutará el código en el atributo href. Pero dado que no encuentra ninguna declaración allí (es decir, declaración vacía), no sucede nada.

Prueba el siguiente código:

<a href="http://google.com/" onclick="return false;">won't go to google.com</a> 
<a href="http://google.com/" onclick="return true;">will go to google.com</a>

¿Eso tiene sentido para usted?

0

Tenga en cuenta que cuando el navegador interpreta el valor "javascript:" de un "href", si el valor devuelto no está vacío se interpreta como el contenido del documento deseado para la etiqueta <a>! Aquí es una página de prueba para que pueda disfrutar:

http://gutfullofbeer.net/jslink.html

La fuente de esa página (míralo, es realmente corto) incluye el siguiente enlace:

<a href='javascript:getLink()'>Click to go there!</a> 

La función "getLink()" se define de la siguiente manera:

function getLink() { 
    var sel = document.getElementById('sel'); 
    return sel.options[sel.selectedIndex].value; 
    } 

como se ve, la función toma el valor seleccionado actual de laEl elementoen la página y devuelve eso. ¿Cómo se ve el elemento <select>?

<select id='sel'> 
    <option value='<html><head><meta http-equiv="refresh" content="2;http://cnn.com"/></head><body>Redirecting to CNN ...</body></html>'>CNN</option> 

    <option value='<html><head><meta http-equiv="refresh" content="2;http://zombo.com"/><head><body>Redirecting to Zombocom ...</body></html>'>Zombocom</option> 
    <option value='<html><head><meta http-equiv="refresh" content="2;http://reddit.com"/></head><body>Redirecting to Reddit ...</body></html>'>Reddit</option> 
</select> 

Los valores de esas opciones son marcas HTML completas para una página con un redireccionamiento al sitio solicitado. Como la URL devuelve un valor, el navegador entiende que ese valor es el contenido de la nueva página.

Es alucinante. No estoy seguro de por qué alguna vez harías esto.

Cuestiones relacionadas