Atualização de novembro de 2020: acho que a melhor técnica possível para isso é o Método 4 neste artigo. O (ou qualquer elemento de wrapper) permanece semântico e acessível, embora seja “clicável” em toda a área. Ele não quebra a seleção de texto e respeita outros elementos interativos “aninhados”.
Este é um HTML perfeitamente válido:
anything E lembre-se de que você pode fazer links display: block;para que toda a área retangular se torne “clicável”. Mas, se há uma tonelada de conteúdo lá, é absolutamente horrível para acessibilidade, ler todo esse conteúdo como um link interativo.
Se você realmente precisa usar JavaScript, uma maneira é encontrar um link dentro do div e ir para o link hrefquando o div for clicado. Isso é com jQuery:
$(".myBox").click(function() ( window.location = $(this).find("a").attr("href"); return false; ));Procura um link dentro de div com a classe “myBox”. Redireciona para o valor do link quando qualquer lugar em div é clicado.
HTML de referência:
blah blah blah. link Ou você pode definir um data-*atributo no e fazer como:
window.location = $(".myBox").data("location");