Hacer clic en toda la división | Programar Plus

Actualización de noviembre de 2020: Creo que la mejor técnica posible para esto es el Método 4 de este artículo. El <div> (o cualquier elemento de envoltura) permanece semántico y accesible, mientras se puede hacer clic en toda el área. No interrumpe la selección de texto y respeta otros elementos interactivos “anidados”.

Este es un HTML perfectamente válido:

<a href="http://example.com">
  <div>
     anything
  </div>
</a>

Y recuerda que puedes hacer enlaces display: block;, por lo que se puede hacer clic en toda el área rectangular. Pero, si hay una tonelada de contenido allí, es absolutamente horrible para la accesibilidad, leer todo ese contenido como el enlace interactivo.

Si es absolutamente necesario utilizar JavaScript, una forma es encontrar un enlace dentro del div e ir a su href cuando se hace clic en el div. Esto es con jQuery:

$(".myBox").click(function() {
  window.location = $(this).find("a").attr("href"); 
  return false;
});

Busca un enlace dentro de div con la clase “myBox”. Redirige a ese valor de enlaces cuando se hace clic en cualquier lugar de div.

HTML de referencia:

<div class="myBox">
  blah blah blah.
  <a href="http://google.com">link</a>
</div>

O puede establecer un data-* atributo en el <div data-location="http://place.com"> y haz como:

window.location = $(".myBox").data("location");
(Visited 14 times, 1 visits today)