¿Qué hace la expresión href <a href= olvidarjavascript:;"> </a>?

He visto el siguiente href usado en páginas web de vez en cuando. Sin embargo, no entiendo qué está tratando de hacer esto o la técnica. ¿Alguien puede elaborar por favor?

<a href="javascript:;"></a>

Un <a>elemento es HTML no válido a menos que tenga un atributo hrefo name.

Si desea que se represente correctamente como un enlace (es decir, subrayado, puntero de mano, etc.), solo lo hará si tiene un hrefatributo.

Por lo tanto, un código como este a veces se usa como una forma de hacer un enlace, pero sin tener que proporcionar una URL real en el hrefatributo. El desarrollador obviamente quería que el enlace en sí no hiciera nada, y esta era la forma más fácil que sabía.

Probablemente tiene algún código de evento de JavaScript en otro lugar que se activa cuando se hace clic en el enlace, y eso será lo que realmente quiere que suceda, pero quiere que se vea como un <a>enlace de etiqueta normal .

Algunos desarrolladores usan href='#'para el mismo propósito, pero esto hace que el navegador salte a la parte superior de la página, lo que puede no ser deseado. Y no podía simplemente dejar el href en blanco, porque href=''es un enlace a la página actual (es decir, causa una actualización de la página).

Hay formas de evitar estas cosas. El uso de un fragmento de código Javascript vacío en el hrefes uno de ellos, y aunque no es la mejor solución, funciona.

Básicamente, en lugar de usar el enlace para mover páginas (o anclas), el uso de este método lanza una función o funciones de JavaScript

<script>
function doSomething() {
  alert("hello")
}
</script>
<a href="javascript:doSomething();">click me</a>

Al hacer clic en el enlace, se activará la alerta.

Existen varios mecanismos para evitar que un enlace llegue a su destino. El de la pregunta no es muy intuitivo.

Una opción más limpia es usar href="#no"where #noes un ancla no definida en el documento.

Puede usar un nombre más semántico como #disable o #action para aumentar la legibilidad.

Beneficios del enfoque:

• Evita el efecto "moverse hacia arriba" del href = "#" vacío
• Evita el uso de javascript

Inconvenientes:

• Debe asegurarse de que el nombre del delimitador no se use en el documento.

Dado que el <a>elemento no actúa como un enlace, la mejor opción en estos casos no es usar un <a>elemento sino un <div>y proporcionar el estilo de enlace deseado.

<a href="javascript:alert('Hello');"></a>

es solo una abreviatura de:

<a href="" onclick="alert('Hello'); return false;"></a>

Es una forma de hacer que un enlace no haga absolutamente nada cuando se hace clic (a menos que los eventos de Javascript estén vinculados a él).

Es una forma de ejecutar Javascript en lugar de seguir un enlace:

<a href="Javascript: doStuff();">link</a>

Cuando en realidad no hay javascript para ejecutar (como su ejemplo), no hace nada.

Consulte esto:

<a href="Http://WWW.stackoverflow.com">Link to the website opened in different tab</a>
<a href="#MyDive">Link to the div in the page(look at the chaneged url)</a>
<a href="javascript:;">Nothing happens if there is no javaScript to render</a>

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

javascript: le dice al navegador que va a escribir código javascript

Hilo antiguo, pero pensé que solo agregaría que la razón por la que los desarrolladores usan esta construcción no es para crear un enlace muerto, sino porque las URL de JavaScript por alguna razón no pasan referencias al elemento html activo correctamente.

Por ejemplo, handler_function(this.id)funciona como onClickpero no como una URL de JavaScript.

Por lo tanto, es una opción entre escribir código pedagógicamente compatible con los estándares que implica que tenga que ajustar manualmente la llamada para cada hipervínculo, o un código ligeramente no estándar que se puede escribir una vez y usar en todas partes.

Por lo tanto, se usa para escribir códigos js dentro de los hrefoyentes de eventos onclicky evitar #enlaces hrefpara hacer que las aetiquetas sean válidas para html.

Tuve una investigación sobre cómo usar javascript:dentro del hrefatributo.

<a href="
     javascript:
        a = 4;
        console.log(a++); 
        a += 2; 
        console.log(a++); 
        if(a < 6){ 
            console.log('a is lower than 6');
        } 
        else 
            console.log('a is greater than 6');
        function log(s){
            console.log(s);
        }
        log('function inplimentation working too');

">Click here</a>

A través de este código, incluso puede escribir códigos js allí en lugar de solo llamar a funciones.

Probado en Chrome versión 68.0.3440.106 (versión oficial) (64 bits)

Probado en Firefox Quantom 61.0.1 (64 bits)

La mejor manera de representar siempre un enlace correctamente es con el CSS de la siguiente manera:

a {cursor: pointer !important}

Uno debe evitar seguir cosas innecesarias como las mencionadas en el hilo.