Aggiornamento novembre 2020: penso che la migliore tecnica possibile per questo sia il Metodo 4 in questo articolo. Il (o qualunque altro elemento wrapper) rimane semantico e accessibile, pur essendo “cliccabile” su tutta l'area. Non interrompe la selezione del testo e rispetta gli altri elementi interattivi "annidati".
Questo è HTML perfettamente valido:
anything E ricorda che puoi creare collegamenti display: block;, quindi l'intera area rettangolare diventa "cliccabile". Ma se c'è un sacco di contenuti lì dentro, è assolutamente orribile per l'accessibilità, leggere tutto quel contenuto come collegamento interattivo.
Se devi assolutamente utilizzare JavaScript, un modo è trovare un link all'interno del div e andare al suo hrefquando si fa clic sul div. Questo è con jQuery:
$(".myBox").click(function() ( window.location = $(this).find("a").attr("href"); return false; ));Cerca un collegamento all'interno di div con la classe "myBox". Reindirizza a quel valore di link quando si fa clic in un punto qualsiasi di div.
HTML di riferimento:
blah blah blah. link Oppure puoi impostare un data-*attributo su e fare come:
window.location = $(".myBox").data("location");