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 (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:
anything Y recuerde que puede crear enlaces display: block;, por lo que se puede hacer clic en toda el área rectangular. Pero, si hay un montón de contenido allí, es absolutamente horrible para la accesibilidad, leer todo ese contenido como el enlace interactivo.
Si es absolutamente necesario usar JavaScript, una forma es encontrar un enlace dentro del div e ir a él hrefcuando 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:
blah blah blah. link O bien, puede establecer un data-*atributo en y hacer como:
window.location = $(".myBox").data("location");