Hacer clic en un Div usando JavaScript

1. Uso del controlador de eventos onclick para hacer que se pueda hacer clic en una div
2. Agregar un clic condicional a una div
3. Es bueno tener una función en una división en la que se puede hacer clic
4. Lograr la funcionalidad del elemento de anclaje con una div en la que se puede hacer clic

La etiqueta <a> (o el elemento de anclaje) en HTML se usa comúnmente para los controles de navegación. Es una etiqueta en la que se puede hacer clic y que funciona sin ningún código javascript que funcione entre bastidores. No es un elemento de bloque. ¿Podemos usar una etiqueta <div> para enrutar a una ruta como la etiqueta de anclaje? La respuesta es definitivamente sí, pero necesitará escribir código javascript para ello. Podemos utilizar un controlador de clic en el elemento div para que se pueda hacer clic en él.

Uso del controlador de eventos onclick para hacer que se pueda hacer clic en una div

El elemento de ancla se muestra en línea. Y es posible que esta característica no siempre funcione a nuestro favor al diseñar la interfaz gráfica de usuario. Los div son fáciles de usar al diseñar GUI, ya que son elementos de bloque independientes. Un div es un elemento de división de contenido y no se puede hacer clic en él de forma predeterminada. Es posible que tengamos que usar el controlador de eventos onclick para procesar los eventos emitidos por el elemento cuando un usuario hace clic en él. El controlador de eventos onclick acepta una función o una expresión JavaScript que precede a la función. Cuando un usuario hace clic en el div, javascript ejecuta las funciones asociadas o las expresiones en el tiempo de ejecución. Hay un par de formas de agregar el controlador de eventos onclick a un elemento div.

Uso de código HTML y JavaScript combinado para hacer que se pueda hacer clic en un Div

El enfoque más utilizado en javascript y varios marcos de javascript es vincular una llamada de función al controlador de eventos onclick en el código HTML. Luego escribimos la definición de función asociada con ella en el código javascript. Una vez que un usuario hace clic en div, el controlador de eventos onclick ejecutará la función pasada como argumento al onclick del elemento div. Consulte el siguiente código.

<div id="title-div" onclick="sayHello()"></div>

function sayHello() {
  console.log('Hello there !!');
}

Una vez que el usuario hace clic en title-div, se ejecuta la función asociada sayHello(). Y tendremos Hello there !! iniciado sesión en la consola web. Este enfoque es ampliamente utilizado y facilita la depuración en comparación con el enfoque javascript puro. El HTML muestra explícitamente el enlace.

Uso de JavaScript puro para hacer clic en un div

Otro enfoque se basa puramente en JavaScript. Primero encontramos el elemento HTML deseado usando cualquiera de los métodos como document.getElementById(), document.getElementsByClassName(), document.querySelectorAll() etc. El método más comúnmente usado para encontrar el elemento HTML es el document.getElementById() ya que identifica de forma única el elemento HTML basado en el id que le asignamos en el HTML. Una vez que encontramos el elemento, el elemento div, adjuntamos el manejador de eventos onclick y enlazamos la función a ejecutar al hacer click en el div. El siguiente código ellebora el enfoque.

<div id="title-div">Click here</div>

window.onload =
    function() {
  var el = document.getElementById('title-div');
  el.onclick = sayHello;
}

function sayHello() {
  console.log('Hello');
}

En el código anterior, vinculamos el controlador de eventos onclick únicamente en JavaScript. No hay rastro de ningún mapeo onclick en el HTML. El HTML se mantiene simple con un elemento div y un id asociado. Además, tenga en cuenta que asignamos el objeto de función sayHello al controlador de eventos onclick. Si enlazamos sayHello (entre paréntesis) en lugar de sayHello, hará que JavaScript ejecute la función en la carga de la window. Y no pasará nada cuando un usuario haga clic en el elemento div.

Agregar un clic condicional a una div

Podemos activar el evento de clic de forma condicional. Usando el enfoque HTML y JavaScript, podemos agregar una expresión junto con el && o el || Firmar según el requisito. JavaScript ejecuta el evento click basándose en cómo se evalúa la expresión booleana. Si se evalúa como verdadero, JavaScript ejecuta la función asociada.

<div onclick="isEvenClick() && sayHello()">Click Here !!!</div>

function sayHello() {
  console.log('Hello');
}

function isEvenClick() {
  clickCounter++;
  return (clickCounter % 2 === 0)
}

El código anterior registrará Hello solo en un número par de clics. También podemos escribir el mismo código con expresión en lugar de la función isEvenClick() como se explica en el siguiente código.

<div onclick="(++clickCounter % 2 === 0) && sayHello()" id="title-div">Click here</div>

La expresión se evalúa en tiempo de ejecución para el valor de clickCounter. Si clickCounter es par, la expresión (++clickCounter % 2 === 0) se evalúa como true y se ejecuta la función sayHello().

Es bueno tener una función en una división en la que se puede hacer clic

Una vez que agreguemos un oyente de click a un div, seguirá siendo un div. El usuario no comprenderá si ese elemento HTML tiene alguna interacción de usuario asociada. Para ese propósito, podemos agregar características usando los estilos CSS. Una de esas cosas es convertir el cursor en un icono de mano. Podemos hacerlo usando cursor: pointer. Es una buena práctica de UI / UX insinuar al usuario final que este elemento HTML es procesable. Podemos hacerlo de la siguiente manera.

<div onclick="sayHello()" style="cursor: pointer;">Click Here !!!</div>

Podemos lograr lo mismo usando JavaScript puro agregando estilos al elemento en tiempo de ejecución. Primero seleccionamos el elemento usando document.getElementById() y luego agregamos el estilo del cursor usando el.style.cursor y le asignamos el valor de cadena pointer. El siguiente código lo explica.

<div onclick="sayHello()">Click Here !!!</div>

window.onload =
    function() {
  var el = document.getElementById('title-div');
  el.style.cursor = 'pointer';
  el.onclick = sayHello;
}

function sayHello() {
  console.log('Hello');
}

Lograr la funcionalidad del elemento de anclaje con una div en la que se puede hacer clic

Podemos usar un elemento div para imitar un elemento anchor. La etiqueta <a> tiene un atributo llamado href que crea un hipervínculo. Podemos imitar el mismo comportamiento usando el onclick de un div. Vinculamos una función para capturar el evento click en el código HTML. En el código javascript, usamos el atributo window.location.href para vincular una URL al div. Observe el funcionamiento en el siguiente código.

<div onclick="navToGoogle()" style="cursor: pointer;">Take me to Google</div>

function navToGoogle() {
  window.location.href = 'https://www.google.com';
}