2011-01-30 18 views
7

No tengo intención de iniciar un debate.# o javascript: void (0)?

Si queremos hacer uso del evento onClick, debemos, de cierta manera, deshabilitar el href para desencadenar. - Es esto correcto ?

Si lo anterior es correcto, creo que javascript:void(0) tiene la ventaja de NO activar el comportamiento de desplazamiento.

¿Son estas suposiciones correctas?

Nota: que no tienen intención de buscar una quimera, pero mi misión consiste en encontrar una forma de botones de estilo de una manera multi-navegador sin éxito accesibilidad (en absoluto), sin cortes y peculiaridades.

+0

@delnan: Se desplaza a la parte superior por lo general. – configurator

+1

simplemente no use el evento 'onclick' dentro de html. –

+0

@delna: 1) Su página debe tener una altura vertical que debe habilitar la barra de desplazamiento; 2) coloque su href = "#" en el mismo lugar en el medio de su página, desplácese hacia abajo, para que su href = "#" permanezca en la parte superior de su ventana gráfica. 3) Haga clic. ;) – MEM

Respuesta

16

Si desea evitar que siga el enlace, debe agregar event.preventDefault() en su controlador de clics (event.returnValue = false; en IE).

Parece que está justo después del mira de un enlace y no su funcionalidad (o propósito). Si es así, puede usar un button con CSS para darle el estilo correspondiente.

Tener enlaces reales con contenidos href # o javascript:void(0) debe evitarse.

una explicación más detallada:

El uso de un enlace sólo para tener algo "hacer clic" no es bueno. Un enlace tiene un significado sintáctico distinto. Como puede asignar un controlador de eventos click a cada elemento, puede usar cualquier otro elemento para eso.

La sintaxis más correcta (imo) sería button ya que todavía tendrá la posibilidad de utilizar tab para navegar en ellas. Puede estilo con CSS para que se vean como un enlace si quieres (see this example)

Ahora con respecto a la prevención de la acción por defecto:.

Asumiendo que tiene un enlace normal un valor adecuado href y querer interceptar el clic. en el controlador de clic que se asigna al elemento, por ejemplo

link.addEventListener('click', function(event){ 
    // some code 
    event.preventDefault(); 
}, false); 

usando event.preventDefault() impide la acción por defecto, que en el caso de un enlace, está siguiendo la URL.

(el código anterior es un ejemplo para los navegadores compatibles W3C, es decir, es un poco diferente)

+0

¿Te importa poner un ejemplo completo de lo anterior? ¿Dónde se debe colocar event.preventDefault? – MEM

+2

@Felix: agregué mis enlaces a su respuesta y eliminé los míos; Espero que no te importe ... – Christoph

+0

@Christoph: ¡Gracias, buen movimiento tuyo! –

0

Si usted tiene tener un href, use javascript:void(0), ya que no tiene ningún efecto, a diferencia de #. Pero sólo puede tener ningún href en absoluto, dar el a un class para que se vea como un enlace, por ejemplo:

/* in stylesheet */ 
a.scriptlink { 
    color: blue; 
    text-decoration: underline; 
    cursor: pointer 
} 

<!-- in HTML --> 
<a class="scriptlink" onclick="whatever"> 
+0

No estoy seguro acerca de la garantía entre navegadores si elegimos eliminar el atributo href. - ¿Alguien puede confirmar esto? :-) – MEM

+4

Un enlace sin una dirección no podrá tener foco, lo que puede afectar la accesibilidad. Solo un inconveniente para esta solución. –

+0

@Parched Squid- Suficiente para mí. :) – MEM

0

prefiero javascript: void (0) más de #, ya que no altera la barra de direcciones poniendo un # allí (que puede afectar a cualquier script futuro que use/modifique la URL).

Pero mejor que ambos, prefiero que la función onclick devuelva false (para que no navegue en absoluto) y luego coloque una URL que dé como resultado la misma acción que hacer clic. Por ejemplo, digamos que al hacer clic en el enlace se carga algo de contenido en una div 'mainArea'. Luego, la URL volvería a cargar toda la página, con esa área principal llena de la misma cosa. La ventaja de hacer esto es que si hacen clic derecho en la url y Copian dirección o Abrir en pestaña nueva, todavía funciona.

<a href="/FullUrl" onclick="return doClick(this);" >Stuff</a> 
+0

Preguntándose por qué nadie, como comentó la sugerencia de Squid Pardo ... Incluso con el botón "abrir en una pestaña nueva" es una buena opción que, según el caso, el usuario debería tener. (párrafo) En aquellos casos en los que se producirá un clic y el usuario permanece en la misma página, ¿la URL completa debería ser la que estamos realmente dentro? ¿Es asi? – MEM

0

Si desea separar marcado y secuencias de comandos, también podría considerar el uso de delegación de eventos de configurar los controladores de eventos.

Muchos frameworks de Javascript (por ejemplo, jQuery) vienen con abstracciones de varios navegadores para que esto no sea una molestia; debido al síndrome NIH, rodé my own solution, sin embargo.

Un ejemplo completo podría tener este aspecto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript" 
    src="http://mercurial.intuxication.org/hg/js-hacks/raw-file/tip/capture.js"> 
    </script> 
    <script type="text/javascript"> 
// un-hide elements 
document.documentElement.className = 'js'; 

// use event-delegation to capture click-events 
capture('click', '.clicky', function(event) { 
    alert(this.title); 
    return false; 
}); 
    </script> 
    <style type="text/css"> 
/* display element only if scripting is enabled */ 
.clicky { display: none; } 
.js .clicky { display: inline; } 
    </style> 
</head> 
<body> 
    <!-- link shouldn't be user-accessible; nevertheless, direct user to 
    error page --> 
    <div> 
    <a href="no-js.html" class="clicky" title="clickety-click">click me</a> 
    </div> 
</body> 
</html> 
Cuestiones relacionadas