¿Es posible hacer que una etiqueta de anclaje HTML no sea cliqueable / enlazable usando CSS?

132

Por ejemplo si tengo esto:

<a style="" href="page.html">page link</a>

¿Hay algo que pueda usar para el atributo de estilo que haga que el enlace no sea cliqueable y no me lleve a page.html?

¿O es mi única opción simplemente no envolver 'enlace de página' en una etiqueta de anclaje?

Editar: Quiero decir por qué quiero hacer esto para que las personas puedan brindar mejores consejos. Estoy tratando de configurar mi aplicación para que el desarrollador pueda elegir qué tipo de estilo de navegación quiere.

Entonces, tengo una lista de enlaces y uno siempre está seleccionado actualmente y todos los demás no. Para los enlaces que no están seleccionados, obviamente quiero que sean etiquetas de anclaje clicables normales. Pero para el enlace seleccionado, algunas personas prefieren que el enlace siga siendo cliqueable, mientras que a otros les gusta hacer que no sea cliqueable.

Ahora podría fácilmente no programar mediante programación las etiquetas de anclaje alrededor del enlace seleccionado. Pero creo que será más elegante si siempre puedo envolver el enlace seleccionado en algo como:

<a id="current" href="link.html">link</a>

y luego deja que el desarrollador controle el estilo de enlace a través de CSS.

Ryan
fuente
3
Si no desea que se haga clic en él, ¿puede usar un <span>en su lugar?
David dice que reinstale a Mónica el
Tendría que estar de acuerdo con David. No rompas los paradigmas de la interfaz de usuario. La expectativa de un usuario es que se puede hacer clic en los enlaces. Si no se puede hacer clic, entonces no es realmente un enlace, ¿verdad?
mrtsherman
Consulte stackoverflow.com/questions/2091168/disable-a-link-using-css para obtener más respuestas posibles.
Oliver
Sí, esta es una idea terrible. Los lectores de pantalla seguirán viendo el enlace como un enlace, porque es un enlace. Los motores de búsqueda también. De hecho, cualquier cosa que entienda HTML. No hagas esto. No hay nada "elegante" al respecto.
Paul D. Waite

Respuestas:

267

Puedes usar este CSS:

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

Y luego asigne la clase a su código html:

<a style="" href="page.html" class="inactiveLink">page link</a>

Hace que el enlace no sea cliqueable y el cursor estilo una flecha, no una mano como los enlaces tienen.

o use este estilo en el html:

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

pero sugiero el primer acercamiento.

Diego Unanue
fuente
Puedo confirmar que esto funciona en la versión de Ubuntu de Firefox / Chrome. Sin embargo, me pregunto si funcionará en IE en Windows.
JohnMerlino
3
La clave de esta solución es: pointer-events. Aquí el enlace para la tabla de compatibilidad
masegaloeh
@JohnMerlino: no funciona en IE9. Ver más en el enlace de masegaloeh a la tabla de compatibilidad
Howie
Advertencia: la pestaña para mover el foco al enlace y el uso de Enter para activar el enlace aún funcionará
con
No creo cursor: el valor predeterminado es necesario. Siempre que tenga eventos de puntero: ninguno, eso parece funcionar.
kloddant
51

Eso no es demasiado fácil de hacer con CSS, ya que no es un lenguaje de comportamiento (es decir, JavaScript), la única forma fácil sería usar un evento OnClick de JavaScript en su ancla y devolverlo como falso, este es probablemente el código más corto podrías usar para eso:

<a href="page.html" onclick="return false">page link</a>
Karan K
fuente
2
@ Mike Este hace que el clic no haga nada, pero el botón aún parece cliqueable.
Acostache
1
@acostache using style = "cursor: default;" debería ayudar con el puntero
John
44
La pregunta era: "usar CSS", así que esta es una buena respuesta, pero no la correcta.
Roman Holzner
Es mejor usar css en lugar de onclick = "return false" por 3 razones principales: 1- Con css puede cambiar el cursor del mouse del enlace predeterminado a la flecha predeterminada. 2- Eso es molesto js. 3- Eso realmente devuelve un valor, no desea devolver falso cada vez que hace clic en el enlace.
Diego Unanue
11

Sí. Es posible usando CSS

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}
sentar
fuente
Esta es la forma más limpia, pero una advertencia: solo es compatible con IE11 + caniuse.com
pixelfreak
8

O simplemente HTML y CSS sin eventos:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>
Pablo
fuente
1
-1 porque esta es una forma bastante complicada / confusa de resolver el problema. Tampoco hace realmente lo que hace la pregunta (hacer que el enlace esté inactivo). Solo cubre el enlace con un elemento invisible. La respuesta de Diego es mucho más limpia.
desarrollo
@desarrollando Creo que la respuesta de Diego también es mejor y debería votarse más alto y aceptarse. Sin embargo, cuando escribí esta respuesta (hace 3 años) pointer-eventscasi no tenía soporte para el navegador.
Paul
@Paulpro Me imaginé que ese era el caso. Perdón por el voto negativo! Solo quiero asegurarme de que la respuesta más actualizada esté en la parte superior. Gracias por la respuesta.
Desarrollado el
6

CSS fue diseñado para afectar la presentación, no el comportamiento.

Podrías usar JavaScript.

document.links[0].onclick = function(event) {
   event.preventDefault();
};
alex
fuente
5

Una forma más discreta (suponiendo que use jQuery):

HTML:

<a id="my-link" href="page.html">page link</a>

Javascript:

$('#my-link').click(function(e)
{
    e.preventDefault();
});

La ventaja de esto es la separación limpia entre lógica y presentación. Si un día decide que este enlace haría otra cosa, no tiene que meterse con el marcado, solo el JS.

pixelfreak
fuente
44
Sabes que podrías escribir fácilmente código que no sea jQuery para hacer lo mismo que se ejecutaría un poco más rápido: document.getElementById('my-link').onclick = function(){ return false; };
Paul
1
Creo que la mayoría de la gente quiere (y debería) usar algún tipo de marco para facilitar el desarrollo. El autor no especificó ninguna restricción de rendimiento, pero jQuery minified y gzipped es de solo 31 KB. Creo que el beneficio supera con creces el costo.
pixelfreak
2
¿Seriamente? Qué navegador no admite onclick o getElementById. De acuerdo, IE 2 no admite onclick, pero tampoco admite CSS ... y dudo mucho que su código jQuery funcione en IE 2 tampoco.
Paul
1
La diferencia de velocidad puede ser pequeña, pero no si no puede descargar el tiempo de descarga de la biblioteca jQuery. Realmente no creo que sea una buena idea usar alentar el uso de jQuery cuando no lo necesites, porque las personas se vuelven dependientes de él y olvidan cómo escribir Javascript sin él.
Paul
44
@PaulPRO Esta discusión es discutible sin los requisitos del autor. Cada marco tiene su propósito. Si no es fluido en JS y solo está haciendo un sitio web mom-n-pop y necesita manipular algún elemento DOM, sería mucho más fácil para él usar un marco. Su renuencia a usar cualquier marco es ridícula. PHP está escrito en C. ¿Eso significa que debe escribir C y no usar PHP? iOS tiene UIKit, Core Data, Quartz, etc. Flash tiene toneladas de bibliotecas de terceros de uso común. Nuevamente, cada marco tiene su propósito. Una mentalidad purista, no integrada, no ayudará a nadie.
pixelfreak
2

La respuesta es:

<a href="page.html" onclick="return false">page link</a>
Doa
fuente
0

Se puede hacer en CSS y es muy simple. cambie la "a" por una "p". Su "enlace de página" no conduce a ningún lado de todos modos si desea que no se pueda hacer clic.

Cuando le diga a su CSS que haga una acción de desplazamiento sobre esta "p" específica, dígale esto:

(para este ejemplo le he dado a la "p" la identificación del "ejemplo")

#example
{
  cursor:default;
}

Ahora su cursor se mantendrá igual que en toda la página.

Hollnder
fuente
-1
<a href="page.html" onclick="return false" style="cursor:default;">page link</a>
Juan
fuente
No hay necesidad de agregar una respuesta separada para esto, su comentario sobre la respuesta de @KaranK es suficiente, pensó. Por favor, evite las respuestas duplicadas.
MAChitgarha