2010-09-08 29 views
46

Nuestra aplicación web se representa totalmente en el navegador.
El servidor solo habla con el navegador a través de mensajes JSON.href = "javascript:" vs. href = "javascript: void (0)"

Como resultado, solo necesitamos una página para la aplicación y, en su mayoría, todas las etiquetas <a> no tienen un href real que apunte a otras páginas.

En mi búsqueda de eliminar cosas innecesarias que me preguntaba si puedo deshacerme de los millones y millones de void(0) disponemos en nuestro código, ya que parecen inútiles:

<a onclick="fn()">Does not appear as a link, because there's no href</a> 
<a href="javascript:void(0)" onclick="fn()">fn is called</a> 
<a href="javascript:" onclick="fn()">fn is called too!</a> 

¿Alguien sabe si se utiliza href="javascript:" puede ¿causar un problema?
Funciona incluso en IE7 ...

Por favor, no gastar su valioso tiempo para decirme JavaScript en línea es malo, ya que esto es generada por un motor de plantillas :)

+22

Inline Javascript está mal :) –

+3

Sé Nick, gracias 8) – Mic

+0

@Second Rikudô, la pregunta que se refieren como un duplicado se le preguntó un año después de este – Mic

Respuesta

24

No causa problemas pero es un truco para hacer lo mismo que PreventDefault

cuando estás camino hacia abajo en la página y un ancla como:

<a href="#" onclick="fn()">click here</a> 

va a saltar a la cima y la dirección URL tendrá el ancla # así, para evitar esto, simplemente return false; o utilizar javascript:void(0);

con respecto a sus ejemplos

<a onclick="fn()">Does not appear as a link, because there's no href</a> 

acaba de hacer a {text-decoration:underline;} y que tendrá "vincular un parecido"

<a href="javascript:void(0)" onclick="fn()">fn is called</a> 
<a href="javascript:" onclick="fn()">fn is called too!</a> 

que está bien, pero en su function al final, justo return false; para evitar que el comportamiento predeterminado, no es necesario hacer algo más

+0

Pensé que el enlace no funcionaba sin href, pero funciona, es solo el subrayado predeterminado y el cursor que no aparece. Quitar el href en conjunto podría ser lo que estoy buscando. Haré un poco de control. – Mic

+2

El enlace no se puede tabular (y obtener el foco) sin href, muy mal. – Mic

+0

simplemente ponga 'href =" # "' no hay problema con eso si su función devuelve 'false' al final, por lo que evita el comportamiento del enlace - puede probarlo aquí: http://jsbin.com/ipoda3 – balexandre

3

que podría hacer que todos # 's.

Debería agregar return false; al final de cualquier función que se llame al hacer clic en el delimitador para que la página no salte hasta la parte superior.

+1

Utilizo la tecla # ya para navegación y propósito del estado. Es común en aplicaciones web de una sola página. Entonces no puedo usar # – Mic

+1

¿por qué usar el # ya no le permite volver a usarlo? –

+0

Quería comprobar si no hay problemas para eliminar el vacío (0). Si utilizo 'href =" # "' en su lugar, necesito agregar un 'return false' a todos los' onclick'. No es mejor, creo. – Mic

0

¿Por qué tener todos los eventos de clic como a href enlaces?

Si en cambio utiliza span etiquetas con :hover CSS y los eventos onclick apropiadas, esto hará que todo el problema por completo.

+0

IE6 no permite ': hover' en elementos arbitrarios ... –

+0

Esto es bastante radical. Si bien tiene sentido. No sé ... Necesito etiquetas A para enlaces. es decir: para tabular, un SPAN no obtendrá el foco – Mic

+0

@Mic Si el enfoque de pestañas es lo único que le preocupa, al darle 'span' y' tabindex' le permitirá enfocarse. –

20

Al utilizar javascript: en la navegación, el valor de retorno del script ejecutado, si lo hay, se convierte en el contenido de un documento nuevo que se muestra en el navegador. El operador void en JavaScript hace que el valor devuelto de la expresión que lo sigue devuelva undefined, lo que impide que ocurra esta acción.Puede hacerlo por uno mismo, copie el siguiente en la barra de direcciones y pulse Intro:

javascript:"hello" 

El resultado es una página nueva con sólo la palabra "hola". Ahora cámbialo a:

javascript:void "hello" 

... no pasa nada.

Cuando se escribe javascript: por sí solo no hay un script que se está ejecutando, por lo que el resultado de que la ejecución del script es también indefinido, por lo que el navegador no hace nada. Esto hace que el siguiente más o menos equivalente:

javascript:undefined; 
javascript:void 0; 
javascript: 

Con la excepción de que indefinido puede ser anulado por la que se declara una variable con el mismo nombre. El uso de void 0 generalmente no tiene sentido, y básicamente se ha reducido desde void functionThatReturnsSomething().

Como han mencionado otros, es mejor usar return false; en el controlador de clic que utilizar el protocolo javascript:.

10

El uso de 'javascript: void 0' va a hacer causa un problema en IE

al hacer clic en el enlace, se disparará onbeforeunload caso de ventana!

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
<a href="javascript:void(0);" >Click me!</a> 
<script> 
window.onbeforeunload = function() { 
    alert('oops!'); 
}; 
</script> 
</body> 
</html> 
4

Este método parece bien en todos los navegadores, si se establece el onclick con un evento jQuery:

<a href="javascript:;">Click me!</a> 

Como se ha dicho antes, href = "#" con el cambio del hash URL y puede desencadenar datos re/load si usa un plugin JS de History (o ba-bbq).

1

Normalmente no utilizo ningún href y cambio el aspecto con css, haciendo que parezca un enlace. Por lo tanto usted no tiene que preocuparse por efecto de enlace en absoluto, excepto por el controlador de eventos de la aplicación

a { 
    text-recoration: underline; 
    cursor: pointer; 
} 
Cuestiones relacionadas