HTML hace que se pueda hacer clic en el texto sin convertirlo en un hipervínculo

2 minutos de lectura

avatar de usuario
emre801

Quiero agregar la capacidad de tener la opción de hacer clic en cierto texto HTML y ejecutar el código JavaScript correcto.

¿Cómo puedo hacer esto?

avatar de usuario
JKirchartz

Para la semántica, usaría un <button> elemento como este:

<button class="link">Clicky</button>

para que el botón parezca texto normal, puede usar CSS:

button.link { background:none; border:none; }

y para facilitar el manejo, haga clic en usar jQuery así:

$(".link").on("click", function(e) {
    // e is the event object
    // this is the button element
    // do stuff with them
});

Aunque si tiene un atributo de ID en el botón, puede usar JS simple como este:

var button = document.getElementById("your-button-id");
button.addEventListener("click", function(e) {
    // e is the event object
    // e.target is the button element
    // do stuff with them
});

<div id="text" onClick="function()"> your text here </div>

  • Esto es bastante feo, no se puede mantener y no se recomienda desde el cambio de siglo. Los detectores de eventos siempre deben declararse en un archivo o bloque de secuencia de comandos independiente.

    – miken32

    3 sep 2021 a las 0:07

El elemento apropiado para un control interactivo que no es un enlace en alguna parte es un <button>Label</button> o (<input type="button" value="Label">). (Siempre puede eliminar el estilo del borde y el fondo con CSS).

Puedes vincular un click controlador de eventos utilizando las API DOM estándar (o una biblioteca que los abstraiga, como YUI o jQuery).

coloque el texto en un lapso u otro elemento con una clase <span class="yourClass">text</span> y luego use javascript para agregar un detector de eventos (preferiblemente al final de su html). Por brevedad, lo demostraré con jQuery, aunque podría hacerse con javascript nativo.

<script>
  $('.yourClass').on('click',function(){
    //your javacript
  });
</script>

Alternativamente, puede buscar en toda la página instancias de esa palabra, aunque no lo recomendaría, ya que realmente ralentizaría las cosas.

¿Ha sido útil esta solución?